Таймер на Javascript

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали об объекте String в Javascript. В данной небольшой статье я бы хотел показать, как реализовать таймер на Javascript. Использовать таймеры можно для чего угодно, например, для отображения времени на сайте, а также для обратного отсчета времени окончания скидки на товар. Вообще, на многих сайтах сейчас можно встретить реализацию таймера. Запустить таймер, можно с помощью двух функций — это setInterval(), которая (как видно из названия) будет выполняться постоянно с заданным интервалом, а также функция setTimeout(), которая выполняется один раз.

Давайте реализуем часы на сайте, самые обыкновенные, без всякой графики:

<html>
<head>
<meta charset="utf-8"/>
<script>
  function myClock() {
	var siteTime = new Date(); //создаём объект Date()
	var hour = siteTime.getHours(); //получаем часы
	var minute = siteTime.getMinutes(); //получаем минуты
	var second = siteTime.getSeconds(); //получаем секунды
	//В следующих трех строках проверяем, если число (часы, минуты, секунды) меньше 10,
	// то выводим 0 перед числом (для красоты)
	if (hour < 10) hour = "0" + hour;
	if (minute < 10) minute  = "0" + minute;
	if (second < 10) second  = "0" + second;
	//Находим на странице элемент с id = siteTime и внутрь него записываем время сайта
	document.getElementById("siteTime").innerHTML = hour + ":" + minute + ":" + second; 
  }
</script>
</head>
<body>
	<script>
		setInterval(myClock, 1000); //ставим выполнение данной функции каждую секунду  
	</script>
  <p style="font-weight:bold;">Текущее время сайта: <span id="siteTime"></span></p>
</body>
</html>

Однако, если мы запустим данный скрипт, то увидим, что время начинает показываться не сразу, а через некоторое время. Для того, чтобы время выводилось при загрузке страницы можно воспользоваться таким способом:
В событие onLoad тега body поставить нашу функцию:

<body onLoad = "myClock();">
  <p style="font-weight:bold;">Текущее время сайта: <span id="siteTime"></span></p>
</body>

И ещё один момент, строку setInterval(myClock, 1000); необходимо занести в функцию myClock(), иначе время будет обновляться только при обновлении страницы, т.е. никакого таймера не будет.

P.S. события мы пока не рассматривали, но они будут рассмотрены в одной из следующих статей.

В качестве домашнего задания:

Создайте таймер обратного отсчета в 60 секунд. Если время будет меньше 20 секунд, то изменить цвет на красный. Когда время кончится (0), то вывести сообщение, что время вышло. Постарайтесь код реализовать сами. Если не получится, то можно посмотреть под хайдом:

Подсмотреть код реализации

<html>
<head>
<meta charset="utf-8"/>
<script>
	function doIt() {
		i = 60;		
		var idInt = setInterval(function() {
			if (i <= 20) {
				document.getElementById("siteTime").style.color = "red";
			}
			document.getElementById("siteTime").innerHTML = i;
			if (i == 0) {
				clearInterval(idInt);
				alert("Время вышло!!!");
				document.getElementByTagName("p").innerHTML = "Вы опоздали";
			}
			i = i - 1;	
		}, 1000);
	}
</script>
</head>
<body onLoad = "doIt();">
  <p style="font-weight:bold;">Осталось времени: <span id="siteTime"></span></p>
</body>
</html>

В данной статье вы узнали, как реализовать таймер на Javascript на примере часов и таймера обратного отсчета.

На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.