كود ساعة ديجتال وتحتها جدول منظم وفي الجدول كل ايام الشهر

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

سوف نبدأ بشرح العناصر المستخدمة في الكود:

الوسم <style>: يستخدم لتعريف تنسيقات CSS لتحديد مظهر العناصر في الصفحة. في هذا الكود، تم تعريف تنسيقات للساعة والجدول.

الوسم <div id="clock">: يستخدم لعرض الساعة الديجيتال. تم تعريف هذا الوسم باستخدام الهوية "clock" لاستهدافه في الجافا سكريبت.

الوسم <table id="calendar">: يستخدم لعرض الجدول المنظم لأيام الشهر. تم تعريف هذا الوسم باستخدام الهوية "calendar" لاستهدافه في الجافا سكريبت.

الوسم <script>: يستخدم لكتابة الجافا سكريبت وإضافة الوظائف والتحكم في سلوك الصفحة. في هذا الكود، تم استخدام الوسم <script> لتحديث الساعة وتمييز تاريخ اليوم في الجدول.

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

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

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

مشاهدة هذا الأداة :

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

<CENTER>
  <SCRIPT language=JavaScript>
    /* زوروا موقعنا على http://www.nasr.app/ للمزيد من الأكواد */

var timerID = null
    var timerRunning = false
    function stopclock() {
      if (timerRunning)
        clearTimeout(timerID)
      timerRunning = false
    }
    function startclock() {
      stopclock()
      showtime()
    }
    function showtime() {
      var now = new Date()
      var hours = now.getHours()
      var minutes = now.getMinutes()
      var seconds = now.getSeconds()
      var timeValue = "" + ((hours > 12) ? hours - 12 : hours)
      timeValue += ((minutes < 10) ? ":0" : ":") + minutes
      timeValue += ((seconds < 10) ? ":0" : ":") + seconds
      timeValue += (hours >= 12) ? "م" : "ص"
      document.clock.face.value = timeValue
      timerID = setTimeout("showtime()", 1000)
      timerRunning = true
    }
  </SCRIPT>

<SCRIPT language=JavaScript>
    
    monthnames = new Array(
      "يناير",
      "فبراير",
      "مارس",
      "أبريل",
      "مايو",
      "يونيو",
      "يوليو",
      "أغسطس",
      "سبتمبر",
      "أكتوبر",
      "نوفمبر",
      "ديسمبر"
    );
    var linkcount = 0;
    function addlink(month, day, href) {
      var entry = new Array(3);
      entry[0] = month;
      entry[1] = day;
      entry[2] = href;
      this[linkcount++] = entry;
    }
    Array.prototype.addlink = addlink;
    linkdays = new Array();
    monthdays = new Array(12);
    monthdays[0] = 31;
    monthdays[1] = 28;
    monthdays[2] = 31;
    monthdays[3] = 30;
    monthdays[4] = 31;
    monthdays[5] = 30;
    monthdays[6] = 31;
    monthdays[7] = 31;
    monthdays[8] = 30;
    monthdays[9] = 31;
    monthdays[10] = 30;
    monthdays[11] = 31;
    todayDate = new Date();
    thisday = todayDate.getDay();
    thismonth = todayDate.getMonth();
    thisdate = todayDate.getDate();
    thisyear = todayDate.getYear();
    thisyear = thisyear % 100;
    thisyear = (thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear);
    if (
      (thisyear % 4 == 0 && !(thisyear % 100 == 0)) ||
      thisyear % 400 == 0
    )
      monthdays[1]++;
    startspaces = thisdate;
    while (startspaces > 7) startspaces -= 7;
    startspaces = thisday - startspaces + 1;
    if (startspaces < 0) startspaces += 7;
    document.write(
      "<table border=2 bgcolor=#FFFFCC " +
        "bordercolor=BLACK><font color=000000>"
    );
    document.write(
      "<tr><td colspan=7><center><strong>" +
        monthnames[thismonth] +
        " " +
        thisyear +
        "</strong></center></font></td></tr>"
    );
    document.write("<tr>");
    document.write(
      "<td bgcolor=#FFFF66 align=center><font color=BLACK face=tahoma size=2>الأحد</font></td>"
    );
    document.write(
      "<td bgcolor=#FFFF66 align=center><font color=BLACK face=tahoma size=2>الاثنين</font></td>"
    );
    document.write(
      "<td bgcolor=#FFFF66 align=center><font color=BLACK face=tahoma size=2>الثلاثاء</font></td>"
    );
    document.write(
      "<td bgcolor=#FFFF66 align=center><font color=BLACK face=tahoma size=2>الأربعاء</font></td>"
    );
    document.write(
      "<td bgcolor=#FFFF66 align=center><font color=BLACK face=tahoma size=2>الخميس</font></td>"
    );
    document.write(
      "<td bgcolor=#FFFF66 align=center><font color=BLACK face=tahoma size=2>الجمعة</font></td>"
    );
    document.write(
      "<td bgcolor=#FFFF66 align=center><font color=BLACK face=tahoma size=2>السبت</font></td>"
    );
    document.write("</tr>");
    document.write("<tr>");
    for (s = 0; s < startspaces; s++) {
      document.write("<td> </td>");
    }
    count = 1;
    while (count <= monthdays[thismonth]) {
      for (b = startspaces; b < 7; b++) {
        linktrue = false;
        document.write("<td>");
        for (c = 0; c < linkdays.length; c++) {
          if (linkdays[c] != null) {
            if (
              linkdays[c][0] == thismonth + 1 &&
              linkdays[c][1] == count
            ) {
              document.write("<a href=\"" + linkdays[c][2] + "\">");
              linktrue = true;
            }
          }
        }
        if (count == thisdate) {
          document.write("<font color='FF0000'><strong>");
        }
        if (count <= monthdays[thismonth]) {
          document.write(count);
        } else {
          document.write(" ");
        }
        if (count == thisdate) {
          document.write("</strong></font>");
        }
        if (linktrue) document.write("</a>");
        document.write("</td>");
        count++;
      }
      document.write("</tr>");
      document.write("<tr>");
      startspaces = 0;
    }
    document.write("</table></p>");
    // النهاية -->
  </SCRIPT>

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

كود ساعة ديجتال وتحتها جدول منظم وفي الجدول كل ايام الشهر

مشاهدة هذا الأداة :

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

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