Програма JavaScript для створення таймера зворотного відліку

У цьому прикладі ви навчитеся писати програму JavScript, яка створить таймер зворотного відліку.

Щоб зрозуміти цей приклад, ви повинні знати такі теми програмування JavaScript:

  • JavaScript Math floor ()
  • Дата та час 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();

Цікаві статті...