Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Простой таймер на JavaScript

Иногда на сайтах необходимо использовать таймеры, предназначение которых может быть различным, но основная суть — всегда одинаковая. Таймер на JavaScript должен показывать сколько часов, минут и секунд прошло с определенного момента. Сегодня мы реализуем самый простой таймер на JavaScript без плагинов и вкратце опишем принцип его действия.

Простой таймер на JavaScript
Содержание статьи

Функция таймера на JavaScript

Сначала подробно разберем происходящее в этой функции, а потом приведем ее в виде одной строки, чтобы ее было удобно копировать и вставлять на сайт там, где это надо.

function timer(id) {
	/* получаем текущее время */
	var t = $("#" + id).text();

	/* разбиваем строку по символу ":" и получаем массив, состоящий из 3 элементов - часы, минуты и секунды */
	var hms = t.split(":");

	/* получаем численное представление каждого элемента, переводя строку в целые числа для дальнейших операций */
	var h = parseInt(hms[0]);
	var m = parseInt(hms[1]);
	var s = parseInt(hms[2]);
	
	/* первым делом мы прибавляем к текущему времени 1 секунду, если их было 59, то чтобы не получилось 60, обнуляем секунды и прибавляем одну минуту */
	if(s == 59) {
		var s = 0;
		
		/* ту же проверку мы осуществляем и для минут, если их 59 и предполагается прибавить еще одну, то обнуляем и прибавляем 1 час */
		if(m == 59) {
			var m = 0;
			++h;
		}
		else {
			++m;
		}
	}
	else {
		++s;
	}

	/* теперь добавляем нули для стандартизации формата, т.е. чтобы вместо 1:2:3 у нас получалось 01:02:03 */	
	if(s < 10) {
		var s = "0" + s;
	}
	
	if(m < 10) {
		var m = "0" + m;
	}
	
	if(h < 10) {
		var h = "0" + h;
	}

	/* записываем результат в слой с идентификатором id */
	$('#' + id).text(h + ':' + m + ':' + s);
}

Как видите, ничего сложного тут нет. Мы просто прибавили одну секунду к старому времени и провели все необходимые проверки для того, чтобы выводимый формат времени соответствовал стандартам и просто удобно читался и был приятен и привычен глазу.

Все что нам осталось сделать - это вызывать эту функцию каждую секунду, а если выражаться точнее, то каждые 1000 милисекунд, которые используются в JavaScript:

$(function() {  
	setInterval('timer("my-timer")', 1000);
});

Здесь мы, конечно же, будем использовать старый добрый setInterval, вызывая функцию, как мы уже отметили ранее, каждые 1000 милисекунд. Получается так, что как только проходит очередная секунда, функция производит все необходимые просчеты и выводит удобочитаемую строку, содержащую новое время.

Стоит добавить, что my-timer - это произвольное имя (идентификатор) слоя, в котором как раз и будет показываться таймер. Первоначально он должен иметь какое-то значение. Все зависит от ваших нужд и от того, откуда начинается отсчет времени (не во всех случаях он будет начинаться с нуля 00:00:00).

00:59:58

Сжатая функция таймера на JavaScript

Наверное, глядя на этот код, вы подумали, что в нем слишком много строк и было бы неплохо его немного сжать. Поэтому ниже приведем ту же самую функцию timer(), только в сжатом виде (одной строкой), чтобы вас это не смущало. Вносить изменения в эту функцию может вообще не понадобиться, поэтому удобней будет использовать ее именно в сжатом виде, чтобы оптимизировать JS-файл.

function timer(id) {var t = $("#" + id).text();var hms = t.split(":");var h = parseInt(hms[0]);var m = parseInt(hms[1]);var s = parseInt(hms[2]);if(s == 59) {var s = 0;if(m == 59) {var m = 0;++h;}else {++m;}}else {++s;}if(s < 10) {var s = "0" + s;}if(m < 10) {var m = "0" + m;}if(h < 10) {var h = "0" + h;}$('#' + id).text(h + ':' + m + ':' + s);}

открыть в новой вкладке

П.С. В данной функции отсутствует вычисление дней и если количество часов перевалит за 23, то ничего не случится, они просто будут прибавляться и дальше. Дни не реализованы по той простой причине, что необходимость в этом возникает в одном случае из миллиона.


Предыдущая статья:
Закрытие контента на сайте


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»