كود حساب الفاصل الزمنى بين تاريخ انت تحدده

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

الكود يتكون من عناصر HTML وسمات CSS وجزء من JavaScript. دعنا نلقي نظرة على الأجزاء الرئيسية للكود:

كود اتش تى ام :

لدينا عنوان <h2> يعرض عنوان الصفحة.

لدينا عنصر <label> يوضح نصًا ويقابله حقل إدخال <input> حيث يمكن للمستخدم إدخال التاريخ.

لدينا زر <button> يستخدم لتنشيط وظيفة حساب الفاصل الزمني.

لدينا <div> مع معرف result يستخدم لعرض نتيجة حساب الفاصل الزمني.

كود سى اس اس :

تم تعيين أنماط مختلفة باستخدام خصائص CSS لتنسيق النصوص والألوان والهوامش.

JavaScript:

يتم استدعاء دالة calculateElapsedTime() عند النقر على الزر "احسب".

تقوم الدالة بالتحقق من صحة التاريخ المدخل وحساب الفاصل الزمني إذا كان التاريخ صالحًا.

يتم استخدام كائن Date ودواله المتاحة للتعامل مع التواريخ والوقت.

تم حساب الفاصل الزمني بين التاريخ المحدد والتاريخ الحالي باستخدام الدوال الرياضية.

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

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

لمشاهدة الأضافة عبر موقع النصر من هنا:

حساب الفاصل الزمنى

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

<!DOCTYPE html>
<html>
<head>
  <title>حساب الفاصل الزمني</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
    }

h2 {
      color: #333;
    }

label {
      font-weight: bold;
      margin-right: 10px;
    }

input[type="text"] {
      padding: 5px;
      font-size: 14px;
    }

button {
      padding: 5px 10px;
      font-size: 14px;
      background-color: #333;
      color: #fff;
      border: none;
      cursor: pointer;
    }

#result {
      margin-top: 20px;
      font-size: 16px;
      color: #333;
    }

table {
      margin: 0 auto;
      border-collapse: collapse;
    }

th, td {
      padding: 8px;
      border: 1px solid #333;
    }
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/datejs/1.0/date.min.js"></script>
</head>
<body>
  <h2>حساب الفاصل الزمني</h2>
  <label for="datePicker">اختر التاريخ:</label>
  <input type="text" id="datePicker">
  <button onclick="calculateElapsedTime()">احسب</button>
  <div id="result"></div>

if (!selectedDate || isNaN(selectedDate)) {
        document.getElementById('result').innerHTML = 'الرجاء اختيار تاريخ صحيح.';
        return;
      }

var elapsedMilliseconds = currentDate.getTime() - selectedDate.getTime();
      var elapsedSeconds = Math.floor(elapsedMilliseconds / 1000);
      var elapsedMinutes = Math.floor(elapsedSeconds / 60);
      var elapsedHours = Math.floor(elapsedMinutes / 60);
      var elapsedDays = Math.floor(elapsedHours / 24);
      var elapsedMonths = Math.floor(elapsedDays / 30.4375);
      var elapsedYears = Math.floor(elapsedDays / 365.25);

var result = '<table>';
      result += '<tr><th>السنوات</th><th>الشهور</th><th>الأيام</th><th>الساعات</th><th>الدقائق</th><th>الثواني</th></tr>';
      result += '<tr>';
      result += '<td id="years">' + elapsedYears + '</td>';
      result += '<td id="months">' + elapsedMonths + '</td>';
      result += '<td id="days">' + elapsedDays + '</td>';
      result += '<td id="hours">' + elapsedHours + '</td>';
      result += '<td id="minutes">' + elapsedMinutes + '</td>';
      result += '<td id="seconds">' + elapsedSeconds + '</td>';
      result += '</tr>';
      result += '</table>';

document.getElementById('result').innerHTML = result;

// تحديث الثواني والدقائق كل ثانية
      setInterval(updateTime, 1000);
    }

function updateTime() {
      var secondsElement = document.getElementById('seconds');
      var minutesElement = document.getElementById('minutes');
      var seconds = parseInt(secondsElement.innerHTML);
      var minutes = parseInt(minutesElement.innerHTML);

seconds++;

if (seconds >= 60) {
        seconds = 0;
        minutes++;
        minutesElement.innerHTML = minutes;
      }

secondsElement.innerHTML = seconds;
    }
  </script>
</body>
</html>