Таймер на JavaScript

Опубликовано: 05.09.2018

видео Таймер на JavaScript

Как сделать таймер обратного отсчета на сайте (FlipClock.js)

Скрипт считает сколько прошло времени (часы:минуты:секунды) с момента его запуска. Использовать скрипт можно не только в он-лайн играх, но и в текстовых блоках типа "время проведенное на сайте", "время потраченное на выполнение теста" и т.п.



Создаем функцию, добавляющую таймер в документ. Объявляем переменные:

function timeOn() { var sec = 0; var min = 0; var hour = 0; var body = document.getElementsByTagName("body")[0]; var cont = document.createElement('div'); var elem = document.createElement('div'); elem.innerHTML = hour + ":0" + min + ":0" + sec; cont.appendChild(elem); body.appendChild(cont);

Создаем функцию для запуска таймера и запускаем таймер:


Учим JavaScript 24. Таймеры и интервалы

var a = setInterval ( function() { sec++; if ( sec==60 ) { sec = 0; min++; } else if (min==60) { min = 0; hour++; } if ( sec < 10 ) { brS = ":0"; // добавить перед секундами 0, если число не двузначное } else { brS = ":"} ; if ( min < 10 ) { brM = ":0"; // добавить перед минутами 0, если число не двузначное } else { brM = ":"} ; if (hour == 2) { // остановить работу скрипта, если прошло 2 часа min = 0; sec = 0; clearInterval(a); } elem.innerHTML = hour + brM + min + brS + sec; },1000 ); } timeOn();

Основной алгоритм работы функции - посекундно увеличивать переменную sec на единицу, когда значение секунд равно 60, увеличиваем переменную min на единицу, и когда значение min равно 60, увеличиваем hour на единицу. В примере работы скрипта, таймер останавливается, когда значение hour равно 2, конечно же при необходимости это условие можно изменить или вообще убрать.


Таймер обратного отсчета на JavaScript

Данный скрипт также можно синхронизировать с местным временим, используя конструктор дат new Date(), тогда получатся полноценные часы на JavaScript. Вопросы и замечания по работе скрипта пишем в комментариях.

rss