9 أسرار لكتابة عناوين المقالات التي تحتل مرتبة عالية في محركات البحث

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

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

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 -->

معاينة حية للساعة الرقمية

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

تعديل المقال