كود الوقت الذي قضيته بالصفحة - بالضغط على زر مخصص

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

بدايةً، سنستخدم لغات HTML وCSS وJavaScript لإنشاء الصفحة وتنسيقها. سنقوم بإنشاء عناصر HTML المختلفة التي تعرض المعلومات والزر، ونستخدم CSS لتنسيق هذه العناصر بشكل مرئي وجذاب.

ثم، سنستخدم لغة JavaScript للتفاعل مع الصفحة. سنستخدم كائن Date في JavaScript للحصول على وقت دخول الصفحة والوقت الحالي، ونقوم بحساب الوقت المنقضي بينهما. سنقوم بتحديث المعلومات المعروضة في الصفحة باستخدام دوال JavaScript التي تقوم بتنسيق الوقت بشكل صحيح وإضافة الصفر اللازم للأرقام الأحادية.

أيضًا، سنقوم بتعيين دالة JavaScript تتفاعل مع الزر الموجود في الصفحة. عند النقر على الزر، ستقوم الدالة بتغيير عرض قائمة الأشياء المعروضة/المخفية التي تحتوي على نفس المعلومات، مما يمنح المستخدم إمكانية عرض أو إخفاء المعلومات الإضافية.

باستخدام هذا الكود، يمكن للمستخدمين رؤية وقت دخول الصفحة والوقت الحالي والوقت المنقضي منذ الدخول، وبالإضافة إلى ذلك، يمكنهم عرض المعلومات الكاملة في قائمة عائمة بمجرد النقر على الزر المناسب.

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

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

<!DOCTYPE html>
<html>
<head>
  <style>
    #info {
      position: fixed;
      top: 10px;
      right: 10px;
      background-color: #f0f0f0;
      padding: 10px;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
      z-index: 9999;
    }

#info button {
      display: block;
      margin-top: 10px;
    }

#info ul {
      list-style-type: none;
      padding: 0;
    }

#info li {
      margin-bottom: 5px;
    }
  </style>
</head>
<body>
  <div id="info">
    <button onclick="toggleInfo()">معرفة وقت دخولك للصفحة</button>
    <ul id="infoList" style="display: none;">
      <li>وقت دخول الصفحة: <span id="entryTimeList"></span></li>
      <li>الوقت الحالي: <span id="currentTimeList"></span></li>
      <li>الوقت منذ دخول الصفحة: <span id="elapsedTimeList"></span></li>
    </ul>
  </div>

function updateTime() {
      var currentTime = new Date();
      var elapsedTime = currentTime - entryTime;

if (infoDisplayed) {
        document.getElementById("entryTimeList").textContent = formatTime(entryTime);
        document.getElementById("currentTimeList").textContent = formatTime(currentTime);
        document.getElementById("elapsedTimeList").textContent = formatElapsedTime(elapsedTime);
      }
    }

function formatTime(time) {
      var hours = time.getHours();
      var minutes = time.getMinutes();
      var seconds = time.getSeconds();

hours = (hours % 12) || 12; // تنسيق الساعات على نظام 12 ساعة
      minutes = addLeadingZero(minutes);
      seconds = addLeadingZero(seconds);

var ampm = hours >= 12 ? "م" : "ص"; // تحديد صباحًا أو مساءًا

return hours + ":" + minutes + ":" + seconds + " " + ampm;
    }

function formatElapsedTime(time) {
      var milliseconds = time % 1000;
      time = Math.floor(time / 1000);
      var seconds = time % 60;
      time = Math.floor(time / 60);
      var minutes = time % 60;
      var hours = Math.floor(time / 60);

milliseconds = addLeadingZero(milliseconds, 3);
      seconds = addLeadingZero(seconds);
      minutes = addLeadingZero(minutes);
      hours = addLeadingZero(hours);

return hours + ":" + minutes + ":" + seconds + "." + milliseconds;
    }

function addLeadingZero(value, digits) {
      digits = digits || 2;
      value = value.toString();
      while (value.length < digits) {
        value = "0" + value;
      }
      return value;
    }

function toggleInfo() {
      var infoList = document.getElementById("infoList");
      infoDisplayed = !infoDisplayed;
      infoList.style.display = infoDisplayed ? "block" : "none";
    }

setInterval(updateTime, 1000);
  </script>
</body>
</html>

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

كود الوقت الذي قضيته بالصفحة - بالضغط على زر مخصص

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

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

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