Таймер зворотного відліку в 18 рядків коду jаvascript.

Буває, що вам для чогось потрібен таймер зворотного відліку, в інтернеті є багато рішень, однак вони або дуже громіздкі, або мають залежності від інших бібліотек. Сьогодні ми розглянемо, як зробити таймер зворотного відліку на jаvascript в 18 рядків коду.

план

Встановіть правильну дату закінчення
Розрахуйте час, що залишився
Наведіть дату до зручного формату
Виведіть дані таймера, як багаторазовий об`єкт
Відкрийте годинник на сторінці і зупиніть їх, коли вони досягнуть нуля

Встановіть правильну дату закінчення

По-перше, вам потрібно встановити правильну дату закінчення. Це буде рядок в будь-якому з форматів, які розуміє Date.parse () метод. Наприклад:

ISO 8601

var deadline =`2015-12-31`-

короткий формат

var deadline =`31 / 12/2015 `-

Або довгий формат

var deadline =`December 31 2015`-

Кожен з цих форматів дозволяє вам встановити точний час (в годинах, хвилинах, секундах) і тимчасову зону. наприклад:

var deadline =`December 31 2015 23:59:59 GMT + 02: 00`-

Розрахуйте час, що залишився

Наступний крок - розрахувати час, що залишився. Щоб це зробити, нам потрібно написати функцію, яка буде брати рядок з часом закінчення та рахувати різницю між цим часом і поточним. Ось як це виглядає:

function getTimeRemaining(endtime) { 
var t =Date.parse(endtime)-Date.parse(newDate()) - 
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 
} - 
}

Для початку ми створюємо змінну t, щоб зберігати час, що залишився. Date.parse () метод вбудований в jаvascript і дозволяє конвертувати рядок з часом в значення в мілісекундах. Це дозволить нам віднімати у свій час від іншого і отримувати різницю між ними.

var t =Date.parse(endtime)-Date.parse(newDate()) -

Наведіть дату до зручного формату

Тепер ми хочемо перевести мілісекунди в дні, години, хвилини і секунди. Давайте використовувати секунди як приклад:

var seconds =Math.floor((t/1000)%60) -

Розберемося, що тут відбувається.

Ділимо мілісекунди на 1000, щоб перевести їх в секунди
Ділимо загальне число секунд на 60 і зберігаємо залишок - вам не потрібні всі секунди, тільки ті, що залишилися після того, як хвилини були підраховані
Округлите вниз до найближчого цілого значення, тому що вам потрібні повні секунди, а не їх фракції

Повторіть цю логіку, щоб конвертувати мілісекунди в хвилини, години і дні.

Виведіть дані таймера, як багаторазовий об`єкт

Коли годинник, хвилини і секунди готові, нам потрібно повернути їх як багаторазовий об`єкт.

Відео: Таймер зворотного відліку на jаvascript

return{ 
`Total`: t, 
`Days`: days, 
`Hours`: hours, 
`Minutes`: minutes, 
`Seconds`: seconds 
} -

Цей об`єкт дозволяє вам викликати вашу функцію і отримувати будь-яке з обчислених значень. Ось приклад, як ви можете отримати решту хвилини:

getTimeRemaining(deadline).minutes

Зручно, правда?

Відкрийте годинник на сторінці і зупиніть їх, коли вони досягнуть нуля

Зараз у нас є функція, яка повертає нам залишилися дні, години, хвилини і секунди. Ми можемо будувати наш таймер. По-перше, створіть наступну html структуру для годин:

id="Clockdiv"gt;

Потім напишіть функцію, яка буде відображати дані всередині нашого 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.totallt; =0) { 
clearInterval(timeinterval) - 
} 
},1000) - 
}

Ця функція приймає два параметри: id елемента, який буде містити наш годинник, і кінцевий час лічильника. Усередині функції ми оголосимо змінну clock і будемо використовувати її, щоб зберігати посилання на наш блок з годинником, так що нам не потрібно запитувати DOM.

Далі ми будемо використовувати setInterval, щоб запускати анонімну функцію кожну секунду, яка буде робити наступне:

Вираховувати час, що залишився
Виводити залишився в наш div
Якщо час, що залишився = 0, зупиняти годинник

Єдине, що залишилося, запустити годинник наступним чином:

initializeClock(`Clockdiv`, deadline) -

Вітаю! Тепер у вас є простий таймер зворотного відліку всього в 18 рядків jаvascript коду.

Підготуйте ваші годинник для відображення

До стилізації нам буде потрібно трохи вдосконалити деякі речі.

Відео: jаvascript (JS-Lynda.com) 14 1 Зворотний відлік

Прибрати початкову затримку, щоб таймер показувався негайно
Зробити скрипт годин ефективнішим, щоб не доводилося безперервно перебудовувати все годинник
Додати нулі за бажанням

Прибираємо початкову затримку

У годиннику ми використовуємо setInterval, щоб оновлювати відображення кожну секунду. Найчастіше це нормально, крім початку, де присутня 1с затримка. Щоб це виправити, нам потрібно оновлювати годинник один раз до того, як setInterval запускається.

Відео: jаvascript. Таймер зворотного відліку. (Дмитро Науменко)

Щоб це зробити, давайте перемістимо анонімну функцію, яку ми передаємо в setInterval(Ту, яка оновлює годинник кожну секунду) в власну окрему функцію, яку назвемо updateClock. Викличте цю функцію рази вище setInterval і потім викличте її знову всередині setInterval. Таким чином, годинник будуть показуватися без затримки.

У вашому jаvascript замініть це:

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.totallt; =0) { 
 clearInterval(timeinterval) - 
} 
} 
 
updateClock() -// запустіть функцію один раз, щоб уникнути затримки 
var timeinterval = setInterval(updateClock,1000) -

Робимо скрипт більш ефективним

Щоб зробити скрипт більш ефективним, нам потрібно оновлювати не всі годинники, а тільки цифри. Для цього помістимо кожне число в тег span і будемо оновлювати тільки цей контент.

ось html:

id="Clockdiv"gt; 
 Days: class="Days"gt;
 
 Hours: class="Hours"gt;
 
 Minutes: class="Minutes"gt;
 
 Seconds: class="Seconds"gt;

Тепер зробимо посилання на ці елементи. Додайте наступний код прямо після визначення змінної 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 = t.seconds-

На такий:

secondsSpan.innerHTML =(`0`+ t.seconds).slice(-2) -

висновок

Ми роздивились, як зробити простий таймер зворотного відліку на jаvascript. Все, що вам залишилося, це додати стилі. Дякую за увагу!

Поділися в соціальних мережах:

Схожі