Программа на 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);

Вывод

 0д 23ч 59м 57с 0д 23ч 59м 55с 0д 23ч 59м 53с 0д 23ч 59м 51с…

В приведенной выше программе этот 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();

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