كود عرض الساعة و التاريخ

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

في البداية، يتم إنشاء كائن جديد من التاريخ باستخدام new Date() ويتم تخزينه في المتغير Stamp.

يتم طباعة تاريخ اليوم باستخدام الأوامر Stamp.getMonth() + 1 للحصول على الشهر، Stamp.getDate() للحصول على اليوم، و Stamp.getFullYear() للحصول على السنة. تظهر هذه المعلومات في تنسيق "شهر/يوم/سنة".

يتم تعيين قيمة المتغيرات Hours و Mins و Time بناءً على وقت الساعة الحالي المسترجع من كائن التاريخ.

يتم فحص قيمة Hours لمعرفة إذا كانت أكبر من أو تساوي 12، وبناءً على ذلك يتم تعيين قيمة Time إما "مساءً" أو "صباحًا" على التوالي.

إذا كانت قيمة Hours أكبر من 12، يتم تعديلها لتكون بين 1 و 12.

إذا كانت قيمة Hours تساوي 0، يتم تعديلها لتكون 12.

تُعين قيمة Mins إلى القيمة الحالية إذا كانت أقل من 10، وإلا يتم إضافة "0" إلى القيمة للحصول على التنسيق الصحيح.

يتم طباعة الساعة والدقائق ومؤشر AM أو PM باستخدام الأوامر Hours + ":" + Mins + " " + Time.

يتم تضمين الكود في عنصر HTML <font> لتحديد حجم النص ونوع الخط.

يتم وضع الكود داخل عنصر <center> لمحاذاته في المركز الأفقي.

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

لمشاهدة الاضافة :

عرض الساعة والتاريخ

للحصول على هذه الاضافة:

<!DOCTYPE html>
<html>
<head>
  <title>عرض الساعة والتاريخ</title>
</head>
<body>
  <center>
    <script language="JavaScript">
      /* زوروا موقعنا elahmad.com للمزيد من الشفرات */
      
      function updateClock() {
        var Stamp = new Date();
        document.getElementById('clock').innerHTML = '';
        document.getElementById('clock').innerHTML = '<font size="2" face="Arial"><b>' + (Stamp.getMonth() + 1) + "/" + Stamp.getDate() + "/" + Stamp.getFullYear() + '</b></font><br>';
        var Hours;
        var Mins;
        var Time;
        Hours = Stamp.getHours();
        if (Hours >= 12) {
          Time = "مساءً";
        }
        else {
          Time = "صباحًا";
        }
        if (Hours > 12) {
          Hours -= 12;
        }
        if (Hours == 0) {
          Hours = 12;
        }
        Mins = Stamp.getMinutes();
        if (Mins < 10) {
          Mins = "0" + Mins;
        }	
        document.getElementById('clock').innerHTML += '<font size="2" face="Arial"><b>' + Hours + ":" + Mins + " " + Time + '</b></font>';
      }

setInterval(updateClock, 1000); // استدعاء الدالة updateClock() كل ثانية واحدة
      
    </script>
    <div id="clock"></div>
  </center>
</body>
</html>

عرض الساعة والتاريخ

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

كود عرض الساعة و التاريخ

لمشاهدة الاضافة :

للحصول على هذه الاضافة:

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