كيفية مشاركة الكود لإضافة ساعة وتحية إلى موقعك

 هل تتطلع إلى خلق اهتمام خاص بموقعك على الويب أو مدونتك؟ يمكن أن تكون إضافة الساعة والتحيات في الوقت الفعلي خيارًا رائعًا! سنوضح لك في هذه المقالة كيفية مشاركة الكود لإضافة ساعة وتحية إلى موقعك.

طريقة التثبيت

انسخ الكود أدناه بالكامل والصقه فوق العلامة </style> أو </body>

<style>
.greet:before{ content: "";
position: absolute;
top: -57px;
background: #cecceb75;
right: -30px;z-index:9;
width: 130px;box-shadow:0 14px 10px -7px #e64646;
overflow: hidden;
height: 122px;
z-index: 0;
border-radius: 50%;
}
.greet{position:relative;
display: inline-block;
font-size: 2rem; box-shadow:0 14px 10px -7px #e64646;
 overflow: hidden;
font-weight: bold;
border: 2px solid #e64646;
padding: 10px 20px;
border-radius: 5px;
transition: ease-in-out 0.1s;
transition-property: background, box-shadow, color;
    direction: ltr;
    width: 100%;
}.greet p{margin:0; font-size: 14px;direction: rtl}
.say{
padding-top: 9px;}

p.time{font-weight:bold;font-size: 24px!important;color:#e64646;display: inline-block; padding-bottom: 9px; border-bottom: 1px solid #ccc;}

</style>

<div class="saying">
<div class="greet"></div></div>
<script>
const container = document.querySelector(".greet");

function updateTime() {
    const timeNow = new Date();
    const hours = timeNow.getHours();
    const minutes = timeNow.getMinutes();
    const seconds = timeNow.getSeconds();
    const ampm = hours >= 12 ? "PM" : "AM";
    const hours12 = hours % 12 || 12;

    let greeting, additionalMessage;

    if (hours >= 5 && hours < 10) {
        greeting = "صباح الخير";
        additionalMessage = "أتمنى لك يوما طيبا";
    } else if (hours >= 10 && hours < 13) {
        greeting = "مساء الخير";
        additionalMessage = "خذ قسطا من الراحة عند الظهر";
    } else if (hours >= 13 && hours < 17) {
        greeting = "مساء الخير";
        additionalMessage = "فترة ما بعد الظهر مليئة بالمرح";
    } else if (hours >= 17 && hours < 18) {
        greeting = "انها مظلمة تقريبا";
        additionalMessage = "جاهز لتناول العشاء";
    } else if (hours >= 18 && hours < 21) {
        greeting = "مساء الخير!";
        additionalMessage = "وقت الغذاء";
    } else if (hours >= 21 && hours < 22) {
        greeting = "طاب مساؤك";
        additionalMessage = "أحلاما سعيدة";
    } else if (hours >= 22 && hours <= 24) {
        greeting = "أهلا صديقي!";
        additionalMessage = "اذهب إلى الفراش مبكراً لتحافظ على صحتك";
    } else if (hours >= 0 && hours < 5) {
        greeting = "صباح الخير";
        additionalMessage = "طاب يومك";
    }

    container.innerHTML = `
        <p class="time">${hours12}:${minutes.toString().padStart(2, '0')} ${ampm}</p>
        <p class="say">${greeting}</p>
        <p>${additionalMessage}</p>
    `;
}

// اتصل في البداية لتحديد الوقت
updateTime();

// تحديثات الوقت كل ثانية
setInterval(updateTime, 1000);

</script>

احفظ لرؤية النتائج

منشورات قد تهمك