|
Читайте также: |
Я уже когда-то упоминал о создании таймеров в 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 скрипты находятся другие примеры с использованием таймеров. Причём там Вы сможете посмотреть не только код самого скрипта, но сразу увидеть и результат.
Дата добавления: 2015-10-31; просмотров: 124 | Нарушение авторских прав
| <== предыдущая страница | | | следующая страница ==> |
| События в JavaScript | | | Создание объектов в JavaScript |