كود انشاء ساعة AM و PM

في هذا المقال سوف نتعلم كيفية إنشاء ساعة تعرض AM و PM باستخدام لغات HTML وCSS وJavaScript. ستعرض الساعة الساعات والدقائق والثواني بتنسيق 12 ساعة وستظهر أيضًا الفترة (AM أو PM).

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

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

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

قم بنسخ الكود المرفق ولصقه في صفحة HTML الخاصة بك، وستحصل على ساعة تعرض الوقت بتنسيق 12 ساعة وتظهر أيضًا الفترة (AM أو PM). يمكنك تخصيص المظهر والألوان والأحجام حسب تفضيلاتك.

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

: :

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

<!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> <span id="period"></span>
  </div>

// تحويل الساعات إلى تنسيق 12 ساعة
      hours = (hours > 12) ? hours - 12 : hours;
      hours = (hours == 0) ? 12 : hours;

// إضافة صفر إلى الساعات والدقائق والثواني إذا كانت أقل من 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;
      document.getElementById("period").innerHTML = period;
    }

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

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

كود انشاء ساعة AM و PM

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

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

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