Таймер зворотного відліку в 18 рядків коду javascript
- Встановіть правильну дату закінчення
- Розрахуйте час, що залишився
- Наведіть дату до зручного формату
- Виведіть дані таймера, як багаторазовий об'єкт
- Відкрийте годинник на сторінці і зупиніть їх, коли вони досягнуть нуля
Встановіть правильну дату закінчення
По-перше, вам потрібно встановити правильну дату закінчення. Це буде рядок в будь-якому з форматів, які розуміє Date.parse () метод. Наприклад:
Або довгий формат
Кожен з цих форматів дозволяє вам встановити точний час (в годинах, хвилинах, секундах) і тимчасову зону. наприклад:
Розрахуйте час, що залишився
Наступний крок - розрахувати час, що залишився. Щоб це зробити, нам потрібно написати функцію, яка буде брати рядок з часом закінчення та рахувати різницю між цим часом і поточним. Ось як це виглядає:
function getTimeRemaining (endtime) var t = Date.parse (endtime) - Date.parse (new Date ());
var seconds = Math.floor ((t / 1000)% 60);
var minutes = Math.floor ((t / 1000/60)% 60);
var hours = Math.floor ((t / (1000 * 60 * 60))% 24);
var days = Math.floor (t / (1000 * 60 * 60 * 24));
return # 'Total #': t,
# 'Days #': days,
# 'Hours #': hours,
# 'Minutes #': minutes,
# 'Seconds #': seconds
>;
>
var t = Date.parse (endtime) - Date.parse (new Date ());
Наведіть дату до зручного формату
Тепер ми хочемо перевести мілісекунди в дні, години, хвилини і секунди. Давайте використовувати секунди як приклад:
var seconds = Math.floor ((t / 1000)% 60);
Розберемося, що тут відбувається.
- Ділимо мілісекунди на 1000, щоб перевести їх в секунди
- Ділимо загальне число секунд на 60 і зберігаємо залишок - вам не потрібні всі секунди, тільки ті, що залишилися після того, як хвилини були підраховані
- Округлите вниз до найближчого цілого значення, тому що вам потрібні повні секунди, а не їх фракції
Повторіть цю логіку, щоб конвертувати мілісекунди в хвилини, години і дні.
Виведіть дані таймера, як багаторазовий об'єкт
Коли годинник, хвилини і секунди готові, нам потрібно повернути їх як багаторазовий об'єкт.
return # 'Total #': t,
# 'Days #': days,
# 'Hours #': hours,
# 'Minutes #': minutes,
# 'Seconds #': seconds
>;
Цей об'єкт дозволяє вам викликати вашу функцію і отримувати будь-яке з обчислених значень. Ось приклад, як ви можете отримати решту хвилини:
Відкрийте годинник на сторінці і зупиніть їх, коли вони досягнуть нуля
Зараз у нас є функція, яка повертає нам залишилися дні, години, хвилини і секунди. Ми можемо будувати наш таймер. По-перше, створіть наступну html структуру для годин:
Потім напишіть функцію, яка буде відображати дані всередині нашого div # 'а:
function initializeClock (id, endtime) var clock = document.getElementById (id);
var timeinterval = setInterval (function () var t = getTimeRemaining (endtime);
clock.innerHTML = # 'Days: # '+ T.days + # '
# '+
# 'Hours: # '+ T.hours + # '
# '+
# 'Minutes: # '+ T.minutes + # '
# '+
# 'Seconds: # '+ T.seconds;
if (t.total
Ця функція приймає два параметри: id елемента, який буде містити наш годинник, і кінцевий час лічильника. Усередині функції ми оголосимо змінну clock і будемо використовувати її, щоб зберігати посилання на наш блок з годинником, так що нам не потрібно запитувати DOM.
Далі ми будемо використовувати setInterval. щоб запускати анонімну функцію кожну секунду, яка буде робити наступне:
- Вираховувати час, що залишився
- Виводити залишився в наш div
- Якщо час, що залишився = 0, зупиняти годинник
Єдине, що залишилося, запустити годинник наступним чином:
Підготуйте ваші годинник для відображення
До стилізації нам буде потрібно трохи вдосконалити деякі речі.
- Прибрати початкову затримку, щоб таймер показувався негайно
- Зробити скрипт годин ефективнішим, щоб не доводилося безперервно перебудовувати все годинник
- Додати нулі за бажанням
Прибираємо початкову затримку
У годиннику ми використовуємо setInterval. щоб оновлювати відображення кожну секунду. Найчастіше це нормально, крім початку, де присутня 1с затримка. Щоб це виправити, нам потрібно оновлювати годинник один раз до того, як setInterval запускається.
Щоб це зробити, давайте перемістимо анонімну функцію, яку ми передаємо в setInterval (ту, яка оновлює годинник кожну секунду) в власну окрему функцію, яку назвемо updateClock. Викличте цю функцію рази вище setInterval і потім викличте її знову всередині setInterval. Таким чином, годинник будуть показуватися без затримки.
var timeinterval = setInterval (function () 1000);
function updateClock () var t = getTimeRemaining (endtime);
clock.innerHTML = # 'Days: # '+ T.days + # '
# '+
# 'Hours: # '+ T.hours + # '
# '+
# 'Minutes: # '+ T.minutes + # '
# '+
# 'Seconds: # '+ T.seconds;
if (t.total
Робимо скрипт більш ефективним
Щоб зробити скрипт більш ефективним, нам потрібно оновлювати не всі годинники, а тільки цифри. Для цього помістимо кожне число в тег span і будемо оновлювати тільки цей контент.
Days:
Hours:
Minutes:
Seconds:
Тепер зробимо посилання на ці елементи. Додайте наступний код прямо після визначення змінної clock.
var daysSpan = clock.querySelector (# '. days #');
var hoursSpan = clock.querySelector (# '. hours #');
var minutesSpan = clock.querySelector (# '. minutes #');
var secondsSpan = clock.querySelector (# '. seconds #');
Далі нам потрібно змінити функцію updateClock. щоб оновити тільки числа, а не всі годинники. Новий код буде виглядати так:
function updateClock () var t = getTimeRemaining (endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.hours;
minutesSpan.innerHTML = t.minutes;
secondsSpan.innerHTML = t.seconds;
Додаємо провідні нулі
Якщо вам потрібні ведующіе нулі, ви можете замінити код такого виду:
secondsSpan.innerHTML = (# '0 #' + t.seconds) .slice (-2);
висновок
Запропонуйте цю статтю друзям:
Якщо Вам сподобався сайт, то розмістіть посилання на нього (у себе на сайті, на форумі, в контакті):
Вона виглядає ось так: