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

Приветствую вас дорогие читатели! В этом уроке я покажу, как сделать простенький таймер обратного отсчета!

Как создать таймер обратного отсчета для сайта на 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 = 60;
		
		if( minute > 0 ) minute--;
		else{
			second = 60;
			
			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 = 60;
			
			if( minute > 0 ) minute--;
			else{
				second = 60;
				
				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, на этом у меня все, подписывайтесь на обновления, желаю вам удачи, пока!

Demo пример

Скачать исходник


Хостинг, которым я пользуюсь: Good-Host


Похожие статьи

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

Ваш email не будет опубликован. Обязательные поля отмечены *

*

code

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>