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


Приветствую вас дорогие читатели! В этом уроке я покажу, как сделать простенький таймер обратного отсчета! Как создать таймер обратного отсчета для сайта на 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, на этом у меня все, подписывайтесь на обновления, желаю вам удачи, пока!

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

Скачать


Раздел: Программирование

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

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

Читайте также:

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript
Виртуальная клавиатура на javascript!
Как создать слайд шоу на javascript?

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

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

* Ваше имя:

Ваш e-mail:

*