Студопедия
Случайная страница | ТОМ-1 | ТОМ-2 | ТОМ-3
АвтомобилиАстрономияБиологияГеографияДом и садДругие языкиДругоеИнформатика
ИсторияКультураЛитератураЛогикаМатематикаМедицинаМеталлургияМеханика
ОбразованиеОхрана трудаПедагогикаПолитикаПравоПсихологияРелигияРиторика
СоциологияСпортСтроительствоТехнологияТуризмФизикаФилософияФинансы
ХимияЧерчениеЭкологияЭкономикаЭлектроника

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

Читайте также:
  1. IV. Реализация национальной морской политики
  2. JavaScript переменные
  3. Switch case в JavaScript
  4. Валидность JavaScript
  5. Воплощение и реализация
  6. Выбор и реализация решения
  7. Інтервальний таймера 8254.

Я уже когда-то упоминал о создании таймеров в 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 | Объект Array в JavaScript | Объект String в JavaScript | Объект Date в JavaScript | Объект Number в JavaScript | Объект Window в JavaScript | Объект Document в JavaScript | Объект Image в JavaScript | Проверка формы в JavaScript | Объект Object в JavaScript |
<== предыдущая страница | следующая страница ==>
События в JavaScript| Создание объектов в JavaScript

mybiblioteka.su - 2015-2024 год. (0.005 сек.)