أخر الاخبار

أسهل طريقة في إنشاء ساعة رقمية جذابة بموقع الويب باستخدام CSS

أسهل طريقة في إنشاء ساعة رقمية جذابة بموقع الويب باستخدام CSS

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



خطوات إنشاء ساعة رقمية في موقع الويب

خطوات إنشاء ساعة رقمية في موقع الويب

1. إنشاء هيكل الساعة الرقمية وتنسيقه باستخدام HTML و CSS

سنستخدم عناصر HTML و CSS لإنشاء الهيكل وتنسيق الساعة الرقمية. سنقوم بإنشاء عنصر <div> ونعطيه معرفًا، ثم نستخدم كود CSS لتحديد الأبعاد والألوان والتنسيق.

ستكون خلفية الساعة سوداء، ولون الأرقام سيكون أبيض، وسنقوم بإنشاء إطار مستطيل حول الساعة الرقمية لإضافة مظهر جذاب. يمكنك التعديل على حجم الخط واللون وتغير لون خلفية الساعة والإطار حسب رغبتك.


2. إضافة توقيت الساعة وعلامة (AM - PM) باستخدام JavaScript

لجعل الساعة تعرض الوقت الحالي، سنستخدم JavaScript. لإنشاء دالة تقوم بتحديث الوقت بشكل دوري، سنقوم بإنشاء عنصر فرعي <span> لعرض علامة "صباحًا" أو "مساءً" بناءً على قيمة الوقت.

بعد إنشاء الهيكل والتنسيق باستخدام HTML و CSS وإضافة الوظائف اللازمة باستخدام JavaScript، يمكنك نسخ الكود النهائي ووضعه في القائمة الجانبية لموقعك أو في صفحة معينة.

كــــــCODـــــود Digital Clock المستخدم
<!-- alkoptan tech - cod digital clock -->
<style>
    body {
        background-color: black;
    }
    #clock-container {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px;
        border: 2px solid green;
        color: white;
        border-radius: 10px;
        background-color: #000000;
        width: fit-content;
        margin: 0 auto;
    }
    #clock {
        font-size: 32px;
        font-weight: bold;
    }
    #ampm {
        font-size: 16px;
        color: #828381;
        font-weight: normal;
        margin-left: 5px;
    }
</style>

<div id="clock-container">
    <span id="clock"></span>
    <span id="ampm"></span>
</div>
<script>
    function displayDigitalClock() {
        var clockElement = document.getElementById("clock");
        var ampmElement = document.getElementById("ampm");
        var currentTime = new Date();
        var hours = currentTime.getHours();
        var minutes = currentTime.getMinutes();
        var seconds = currentTime.getSeconds();
        var timeString = hours.toString().padStart(2, "0") + ":" +
            minutes.toString().padStart(2, "0") + ":" +
            seconds.toString().padStart(2, "0");
        clockElement.textContent = timeString;

        if (hours >= 12) {
            ampmElement.textContent = "PM";
        } else {
            ampmElement.textContent = "AM";
        }
    }
    setInterval(displayDigitalClock, 1000);
    displayDigitalClock();
</script>
<!-- alkoptan tech - cod digital clock -->

قم بنسخ الكود ووضعه بالمكان الذى تريده وسيعمل الكود بشكل تلقائي على جلب التوقيت الحقيقي للوقت. واستمتع بإنشاء ساعة رقمية مبتكرة تجذب انتباه الزوار وتضفي لمسة رائعة على تصميم موقعك.
إذا أعجبك هذا المقال، يرجى مشاركته مع أصدقائك ومساعدتنا في نشر الكلمة.
تعليقات



    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -