Главная->Уроки по js->Реализация таймера в JavaScript

Реализация таймера в JavaScript

30 Апр в 00:00

Реализация таймера в JavaScript Я уже когда-то упоминал о создании таймеров в JavaScript, которые вызывают определённые действия через определённое время, но в этой статье хочется ещё раз сказать о них. Потому что я очень часто вижу их применение в Интернете, и, разумеется, многим захочется делать такие же вещи. Как раз о том, как их делать Вы и узнаете из этого материала. Начнём с повторения двух функций setTimeout() и setInterval(), которые позволяют запустить таймер. Первая функция срабатывает через заданный промежуток времени и заканчивает свою работу. А функция setInterval() работает постоянно, то есть через равные промежутки времени вызывает определённое действие. Это было как повторение. А теперь переходим к практике. Самая популярная задача - это часы на сайте. Думаю, многие с ними встречались. Давайте реализуем простейший вариант (простейший, потому что без графики): <html> <head> <script language = 'javascript'> function startTime() { var date = new Date(); var hours = date.getHours(); var minutes = date.getMinutes(); var seconds = date.getSeconds(); if (hours < 10) hours = "0" + hours; if (minutes < 10) minutes = "0" + minutes; if (seconds < 10) seconds = "0" + seconds; document.getElementById("time").innerHTML = hours + ":" + minutes + ":" + seconds; setTimeout(startTime, 1000); } </script> </head> <body onLoad = 'startTime()'> <b>Время на сайте: <span id="time"></span></b> </body> </html> Чтобы стало понятно, о чём идёт речь, советую данную страницу сохранить к себе и запустить в браузере. А теперь объясняю, как это работает. Начнём с функции startTime(), которая в самом начале узнаёт текущие время и дату. Затем получает отдельно часы, минуты и секунды. Дальше добавляются ведущие нули для однозначных чисел (чтобы не было, например, такого 15:1:12, а было 15:01:12). После этого внутри элемента с id = "time" появляется строка с текущим временем. И дальше идёт самое интересное: мы внутри самой функции вызываем через одну секунду её ещё раз. Всё вышесказанное вновь выполняется (но время уже на одну секунду больше), снова меняется содержимое элемента "time", затем вновь запуск через одну секунду. И, наконец, чтобы вся эта конструкция запустилась, мы при загрузке документа (событие Load и обработчик onLoad) вызываем функцию startTime(). Вот такой классический алгоритм реализации таймера. Это был пример использования таймеров. В категории JavaScript скрипты находятся другие примеры с использованием таймеров. Причём там Вы сможете посмотреть не только код самого скрипта, но сразу увидеть и результат.