سكريبت العد التنازلي جافا سكريبت

سلام عليكم ورحمة الله وبركاته و مرحبا بك في مدونة ماتريال ويب وفي تدويتة جديدة في هذه التدوينة أقدم لكم سكريبت بلغة جافا ل العد التنازلي متعدد إستعمالات

معاينة

مميزات سكريبت العد التنازلي script javascript

إمكانية تغير العد التنازلي إلى أي تاريخ
تخصيص اللون و الخط
سهل إستخدام

متطلبات تشغيل سكريب سكريبت

تمكين javascript في متصفح

محتوي ملف سكريبت العد التنازلي

ملف html
ملف javascript
ملف css

تحميل سكريبت العد التنازلي جافا سكريبت

لعلم فقط هذا سكريبت تمنه 5 دولار نحن نقدمه لكم مجانا لدي ادعمنا و حمل سكريبت من هذا الرابط

DOWNLOAD

تغيير تاريخ العد التنازلي في ملف Script.js

كل ما عليك هو تحرير ملف بأي محرر اكواد وغير ما هو محدد بأحمر

أفضل تطبيقات البرمجة فى أندرويد (html و css و Android)

// Set the date we're counting down to
var countDownDate = new Date("Apr 18, 2020 10:00:00").getTime();  // CHANGE DATE AND TIME HERE

// Update the count down every 1 second
var countdown = setInterval(function() {

  // Get todays date and time
  var now = new Date().getTime();

  // Find the difference between now and the count down date
  var difference = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(difference / (1000 * 60 * 60 * 24));
  var hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((difference % (1000 * 60)) / 1000);

  // If the difference is less than 0, stop countdown
  if (difference < 0) {
    clearInterval(countdown);
    days = 0, hours = 0, minutes = 0, seconds = 0;
  }

  // Output the result
  document.getElementById("days").children[0].innerText = days;
  document.getElementById("hours").children[0].innerText = hours;
  document.getElementById("minutes").children[0].innerText = minutes;
  document.getElementById("seconds").children[0].innerText = seconds;
}, 1000);

ملف css العد التنازلي style.css

/* CHANGE COLOR AND FONT HERE */
:root {
  --board-color: #497959;
  --frame-color: #B78240;
  --main-font-color: #E8E8E8;
  --main-font-family: 'Trebuchet MS';
}

#timer {
  width: 465px;
  display: flex;
  justify-content: center;
  text-align: center;
  margin: auto;
  padding: 24px 0;
}

#timer .board {
  width: 23%;
  margin: 0 1%;
  font-family: var(--main-font-family), Arial, sans-serif;
  font-weight: 700;
}

#timer .board > div.number {
  background-color: var(--board-color);
  border: var(--frame-color) solid 5px;
  color: var(--main-font-color);
  font-size: 48px;
  padding: 18px 0;
}

#timer .board > div.labels {
  padding-top: 8px;
  font-size: 15px;
  text-transform: uppercase;
}

ملف html العد التنازلي index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Chalkboard Theme Countdown Timer</title>

  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="timer">
    <div id='days' class="board">
      <div class="number"></div>
      <div class="labels">Days</div>
    </div>

    <div id='hours' class="board">
      <div class="number"></div>
      <div class="labels">Hours</div>
    </div>

    <div id='minutes' class="board">
      <div class="number"></div>
      <div class="labels">Minutes</div>
    </div>

    <div id='seconds' class="board">
      <div class="number"></div>
      <div class="labels">Seconds</div>
    </div>
  </div>
  
  <script src="script.js"></script>
</body>
</html>

أفضل مكتبة أكواد css و js جاهزة (bootstrap)

ادا أعجبتك تدويتة أخبرنا بدلك شارك برأيك في تعليقات اسفله إلى هنا ينتهي درسنا اليوم و سلام عليكم ورحمة الله وبركاته

شارك Share Tweet Share Share Share

انقر هنا

محمد نجيري (mnajiri@) مشرف على مدونة ماتريال ويب تحت الرابط التالي :https://mdwab.blogspot.com/ مند 2018 و أدعوك لمتابعتي عبر حسابي على أنستغرام

5 تعليقات

يسعدنا تفاعلكم بالتعليق، لكن يرجى مراعاة الشروط التالية لضمان نشر التعليق

● أن يكون التعليق خاص بمحتوى التدوينة
● أن لا تضع أي روابط خارجية
● أي سؤال خارج محتوى التدوينة يرجى تواصل معنا
● يمكنك تعليق بإستخدام صور ✋👇