Реализация таймера в 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 скрипты находятся другие примеры с использованием таймеров. Причём там Вы сможете посмотреть не только код самого скрипта, но сразу увидеть и результат.
-
Создано 26.10.2010 09:17:56
-
Михаил Русаков
Комментарии (16):
Михаил, а как сделать его больше по размеру?
Ответить
Хотя бы так: <body style="font-size: 300%;">
Ответить
спс! А не подскажите где можно посмотреть как вставить на сайт гугл или яндекс карту?
Ответить
Посмотрите на их официальных сайтах, там должно быть всё подробно написано.
Ответить
А как с помощью таймера реализовать следующую задачу.вот,есть такой код <script language="JavaScript"> function random(img){ img.style.position = 'absolute' var top = Math.floor((Math.random()*500)+0); var left = Math.floor((Math.random()*700)+0); img.style.top = top; img.style.left = left; } </script> </head> <body> <center> <img src="1.jpg" id="img" height="150" onMouseOver="random(this)" /> </center> </body> тут картинка убегает от курсора.как сделать чтобы картинка плавно передвигалась?
Ответить
Делать в цикле, последовательно перемещая из начальной точки в конечную. Можно по прямой (y=kx + b), можно по двум перпендикулярам, сначала по x выравниваете, потом по y.
Ответить
Здравствуйте,помогите пожалуйста с решением задачи,который присутствует в вашем видеокурсе: "При щелчке на кнопку цвет фона должен мигнуть количество раз, заданное в текстовом поле." Спасибо огромное!
Ответить
1) Получить значение из input и записать его в глобальную переменную. 2) Создать глобальный счётчик текущего количества миганий (то есть сколько их уже было). 3) Создать функцию с таймером settimeout(), где будет происходить мигание. Так же там идёт увеличение глобального счётчика. 4) Если значение счётчика меньше глобальной переменной, вызывается settimeout(), иначе просто идёт выход из функции.
Ответить
Порядок выполнения я то понял. Но вот реализовать это все у меня не получается. По сути он должен мигать неограниченное количество раз(если нет ограничителя конечно), но у меня мигает два раза и всё! В чем проблема? Посмотрите пожалуйста: function color() { document.bgColor = "red"; setTimeout(color,100); setTimeout(func,100); } function func() { document.bgColor = "white"; } <form> <input type="text"> <input type="button" value="Кнопка" onclick="color();"> </form>
Ответить
Он не должен моргать вечно, изначально пусть будет 0, а потом уже при считывании из поля. Решайте задачу постепенно, и первая задача - получить данные из текстового поля и записать в глобальную переменную.
Ответить
Может я и не прав, но это не таймер, а обычные часы! Таймер это когда часы показывают сколько времени осталось до того или иного промежутка времени.
Ответить
Почему <body onLoad = 'startTime()'> в валидаторе является ошибкой?
Ответить
onload напишите.
Ответить
Исправил, теперь все работает и валидно. Огромное спасибо!
Ответить
Михаил, прохожу ваш курс по js. По таймерам есть задание Выведите время, проведённое пользователем на странице в формате: mm:ss. Например, 01:15 или 02:00. То есть первые 2 цифры – это минуты, а вторые 2 цифры – это секунды. Каждую секунду время должно увеличиваться. Примечание: Обратите внимание, что если число минут или секунд меньше 10, то должен быть добавлен ведущий 0, то есть чтобы не было 01:5, а было 01:05. Подскажите пожалуйста как его реализовать? Даже не знаю с чего начать
Ответить
manai вопросы по курсам задавайте в службу поддержки,пожалуйста
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.