كود ساعة ضمن مستطيل - ساعات + دقائق + ثواني

في هذا المقال سوف نتعلم كيفية إنشاء ساعة ضمن مستطيل باستخدام لغات HTML وCSS وJavaScript. ستكون الساعة تعرض الساعات والدقائق والثواني بشكل دقيق ومحدث بانتظام.

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

بعد ذلك، سنقوم بتخصيص مظهر المستطيل والنص الموجود داخله باستخدام CSS. يمكن تعديل خصائص مثل الخلفية ولون النص ونوع الخط وحجم الخط ومحاذاة النص وغيرها لتناسب الأسلوب الذي ترغب فيه.

ثم، سنقوم بإنشاء عناصر داخل المستطيل لعرض الساعات والدقائق والثواني. يمكن استخدام عناصر <div> أو <span> لهذا الغرض. سنقوم بإعطاء كل عنصر معرف فريد باستخدام الخاصية id، وذلك لنتمكن من استهدافها في الكود JavaScript لتحديث قيمها.

ثم، سنستخدم JavaScript لتحديث الساعة بانتظام. سنستخدم document.getElementById للوصول إلى عناصر الساعة وتحديثها باستخدام الخاصية innerHTML. سنحصل على الوقت الحالي باستخدام new Date() ونقوم بإستخلاص الساعات والدقائق والثواني منه.

أخيراً، سنستخدم دالة setInterval لتحديث الساعة بشكل مستمر. يتم تعيين فترة التحديث بوحدة الوقت المللي ثانية (1000 مللي ثانية تعادل ثانية واحدة)، وبذلك ستتم مزامنة عرض الساعة مع الوقت الحقيقي.

قم بنسخ الكود المرفق ولصقه في صفحة HTML الخاصة بك.

مشاهدة الساعة :

: :

للحصول على هذه الساعة :

<!DOCTYPE html>
<html>
<head>
  <style>
    /* تخصيص مظهر المستطيل */
    .container {
      width: 300px; /* تحديد عرض المستطيل */
      height: 100px; /* تحديد ارتفاع المستطيل */
      background-color: black; /* تحديد لون الخلفية */
      color: lime; /* تحديد لون النص */
      font-family: Arial, sans-serif; /* تحديد نوع الخط */
      font-weight: bold; /* تحديد سمك الخط */
      font-size: 24px; /* تحديد حجم الخط */
      text-align: center; /* محاذاة النص في المركز */
      line-height: 100px; /* محاذاة النص عموديًا في المركز */
    }
  </style>
</head>
<body>
  <div class="container">
    <span id="hours"></span> : <span id="minutes"></span> : <span id="seconds"></span>
  </div>

// إضافة صفر إلى الساعات والدقائق والثواني إذا كانت أقل من 10
      hours = (hours < 10) ? "0" + hours : hours;
      minutes = (minutes < 10) ? "0" + minutes : minutes;
      seconds = (seconds < 10) ? "0" + seconds : seconds;

// تحديث قيمة الساعات والدقائق والثواني في العناصر المناسبة في الصفحة
      document.getElementById("hours").innerHTML = hours;
      document.getElementById("minutes").innerHTML = minutes;
      document.getElementById("seconds").innerHTML = seconds;
    }

// تحديث الساعة بشكل مستمر
    setInterval(updateClock, 1000);
  </script>
</body>
</html>

موقع النصر التقنى

كود ساعة ضمن مستطيل - ساعات + دقائق + ثواني

مشاهدة الساعة :

للحصول على هذه الساعة :

مهندس محمد نصر