Создаем таймер обратного отсчета!


Приветствую вас дорогие читатели! В этом уроке я покажу, как сделать простенький таймер обратного отсчета! Как создать таймер обратного отсчета для сайта на javascript? Итак, с таймерами в интернете можно встретиться довольно таки часто. Например, когда предлагают записаться на какой-нибудь семинар или бизнес тренинг, на сайте устанавливают время обратного отчета, по истечению которого уже нельзя будет принять участие в каком-то мероприятии. Сделать такой таймер для своего сайта очень просто! В этом уроке я не стал использовать никаких дополнительных библиотек и Фреймворков типа "jquery" и решил написать весь код на чистом javascript, в одном html файле.

Что умеет данный таймер?

Давайте опишем условия работы нашей программки:
  1. Можно установить количество дней, минут и секунд
  2. Каждую секунду происходит уменьшение времени соответственно на 1 секунду
  3. По истечению времени появится всплывающее окно с текстом о том, что таймер сработал
 

Как реализовать таймер?

Весь код можно рассмотреть или скачать ниже, а чтобы лучше разобраться в уроке, разбирать  код мы будем по отдельности! HTML код:
<div id="timer">
	<div id="hour">11</div>&nbsp;:
	<div id="minute">56</div>&nbsp;:
	<div id="second">45</div>
</div>
Здесь все просто - имеется обертка для цифр с идентификатором - "timer", а в нее вложены еще 3 блока для цифр с соответствующими ID.
&nbsp; - это пробел, который чуть-чуть пододвигает двоеточие.
Если вам нужно задать начальное значение для отсчета, то изменять его нужно как раз в этом html коде. CSS код:
#timer{
margin: 20px auto;
text-align: center;
color: #333;
font-family: fantasy;
font-size: 100px;
cursor: default;
}

#timer div{
display: inline;
}
Здесь мы задаем стили отдельно для обертки, прописывая стиль шрифта, его размер, цвет и так далее, а также прописываем свойство - "display: inline" для внутренних div'ов, чтобы цифры выстроились в одну полоску.   Ну и самое интересное - JavaScript код:
function timer(){

	var hour = document.getElementById('hour').innerHTML;
	var minute = document.getElementById('minute').innerHTML;
	var second = document.getElementById('second').innerHTML;
	var end = false;
	
	if( second > 0 ) second--;
	else{
		second = 59;
		
		if( minute > 0 ) minute--;
		else{
			second = 59;
			
			if( hour > 0 ) hour--;
			else end = true;
		}
	}

	if(end){
		clearInterval(intervalID);
		alert("Таймер сработал!");
	}else{
		document.getElementById('hour').innerHTML = hour;
		document.getElementById('minute').innerHTML = minute;
		document.getElementById('second').innerHTML = second;
	}
}
window.intervalID = setInterval(timer, 1000);
Как видите, мы создали функцию - "timer", которая будет срабатывать каждую секунду. Срабатывание этой функции достигается за счет установленного интервала (setInterval):
window.intervalID = setInterval(timer, 1000)
Интервал (функция) принимает два параметра: название функции, которую нужно вызывать и время в миллисекундах. 1000 миллисекунд - это одна секунда. Этому интервалу мы присваиваем идентификатор - "intervalID ", для того, чтобы можно было остановить интервал, когда выйдет время. Window означает, что переменная будет глобальной и доступна внутри функции. Теперь давайте разберем непосредственно саму функцию "timer". Сначала мы считываем текущие часы, минуты и секунды в переменные с соответствующими названиями. Переменная - "end" нужна для того, чтобы остановить уменьшение таймера и вывести фразу - "Таймер сработал!". По умолчанию выставляем в false (ложь). Далее идут простые условия:
Если секунд больше 0, то уменьшаем их на 1, иначе присваиваем им максимальное значение (60) и проверяем точно также минуты, а потом и часы
В итоге, если окажется, что количество оставшихся часов, и минут и секунд равно 0, то изменяем переменную end на true. Далее, мы просто проверяем переменную end - если она равна истине, значит, таймер сработал и нужно вывести фразу и удались интервал, иначе просто обновляем значения часов, минут и секунд. Весь код:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf8'>
<title>Создаем таймер обратного отсчета - Seo блог sergey-oganesyan.ru</title>
<script>
window.onload = function(){ 

	function timer(){

		var hour = document.getElementById('hour').innerHTML;
		var minute = document.getElementById('minute').innerHTML;
		var second = document.getElementById('second').innerHTML;
		var end = false;
		
		if( second > 0 ) second--;
		else{
			second = 59;
			
			if( minute > 0 ) minute--;
			else{
				second = 59;
				
				if( hour > 0 ) hour--;
				else end = true;
			}
		}

		if(end){
			clearInterval(intervalID);
			alert("Таймер сработал!");
		}else{
			document.getElementById('hour').innerHTML = hour;
			document.getElementById('minute').innerHTML = minute;
			document.getElementById('second').innerHTML = second;
		}
	}
	window.intervalID = setInterval(timer, 1000);
}
</script>
<style>
#timer{
margin: 20px auto;
text-align: center;
color: #333;
font-family: fantasy;
font-size: 100px;
cursor: default;
}

#timer div{
display: inline;
}
</style>
</head>
<body>

	<div id="timer">
		<div id="hour">11</div>&nbsp;:
		<div id="minute">56</div>&nbsp;:
		<div id="second">45</div>
	</div>

</body>
</html>
Как видите, создать таймер обратного отсчета очень просто! Прилагаю пример и исходный файл данного урока по javascript, на этом у меня все, подписывайтесь на обновления, желаю вам удачи, пока!

Посмотреть результат

Скачать


Раздел: JavaScript с примерами

Дата последнего изменения: 2016-02-03 22:54:07

Просмотров: 13945

Оставить комментарий

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*