Програма JavaScript за създаване на таймер за обратно отброяване

В този пример ще се научите да пишете програма JavScript, която ще създаде таймер за обратно отброяване.

За да разберете този пример, трябва да имате познанията по следните теми за програмиране на JavaScript:

  • JavaScript математически етаж ()
  • Дата и час на JavaScript
  • Javascript setInterval ()

Пример: Създайте таймер за обратно отброяване

 // program to create a countdown timer // time to countdown from (in milliseconds) let countDownDate = new Date().getTime() + 24 * 60 * 60 * 1000; // countdown timer let x = setInterval(function() ( // get today's date and time in milliseconds let now = new Date().getTime(); // find the interval between now and the countdown time let timeLeft = countDownDate - now; // time calculations for days, hours, minutes and seconds const days = Math.floor( timeLeft/(1000*60*60*24) ); const hours = Math.floor( (timeLeft/(1000*60*60)) % 24 ); const minutes = Math.floor( (timeLeft/1000/60) % 60 ); const seconds = Math.floor( (timeLeft/1000) % 60 ); // display the result in the element with console.log(days + "d " + hours + "h " + minutes + "m " + seconds + "s "); // clearing countdown when complete if (timeLeft < 0) ( clearInterval(x); console.log('CountDown Finished'); ) ), 2000);

Изход

 0d 23h 59m 57s 0d 23h 59m 55s 0d 23h 59m 53s 0d 23h 59m 51s…

В горната програма setInterval()методът се използва за създаване на таймер.

В setInterval()метода се изпълнява в определен интервал от време (в случая 2000 милисекунди).

В new Date()постанови текущата дата и час. Например,

 let d1 = new Date(); console.log(time); // Fri Aug 28 2020 09:19:40 GMT+0545 (+0545)

В getTime()метода връща броя милисекунди от полунощ на 1-ви Януари 1970 (ECMAScript епоха) до определената дата (тук, актуална дата).

Следващият код дава времето на следващия ден в милисекунди.

 new Date().getTime() + 24 * 60 * 60 * 1000;

Сега можем да изчислим оставащото време, като използваме следната формула:

 let timeLeft = countDownDate - now;

Останалият брой дни се изчислява, като се използва:

  • Интервалът от време се разделя на 1000, за да се определи броят на секундите, т.е.timeLeft / 1000
  • След това интервалът от време се разделя на 60 * 60 * 24, за да се определи броят на оставащите дни.
  • Най Math.floor()функция се използва за придаване на броя на цяло число.

Подобни методи се използват за часове, минути и секунди.

Забележка : Можете също да използвате персонализирано време за обратно отброяване, като предадете определена дата.

Например,

 let countDownDate = new Date("Aug 5, 2025 14:22:36").getTime();

Интересни статии...