Рассмотрим наглядный пример управления таймером на jQuery.
Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость изменяется в реальном времени. По окончании времени появляется кнопка перезапуска таймера. Счетчик продублировать на вкладку в TITLE
Где применимо: Нигде. В представленном виде jQuery таймер применять негде, но взять из него код для решения других задачи очень даже можно. Например, можно переделать его в казино
HTML код
<div class="container">
<h2>Выбрать скорость</h2>
<hr>
<div class="buttons">
<p>Выбери скорость ниже</p>
<button class=" button 1000">1000</button>
<button class=" button 100">100</button>
<button class=" button 10">10</button>
<button class=" button 1">1</button>
</div>
<br>
<div class="timer"></div>
<br>
<button class="button restart" style="display: none;">перезапустить</button>
</div>
JavaScript jQuery
Далее по частям распишу всю логику, а в конце прикреплю архив с кодом
Задаем начальные данные
var time_const = 1000, // а-ля кеш счетчика
time = time_const, // считать и обнулять будем отсюда
title = $('title').text(), // берем текст вкладки
speed = 1000, // скорость по умолчанию
int; // переменная для таймера
// запускаем таймер вместе с загрузкой страницы
timer_countdown(speed);
Таймер хранится в отдельной функции т.к. вызывается в нескольких местах.
Переменные time = time_const обновляет данные по времени. Другого решения не придумал. Когда таймер дойдет до конца, значение переменной будет равно нулю. Попытка перезапустить его без перезагрузки страницы не получится. Поэтому оригинальное время мы храним в отдельной переменной и сбрасываем ноль перезаписью.
Создаем событие на перезапуск таймера
// ловим клик по кнопке
$('.restart').click(function(){
// сбрасываем время счетчика
time = time_const;
// запускаем счетчик
timer_countdown(speed);
// скрываем кнопку
$('.restart').hide();
});
Изменяем скорость таймера по клику
// ловим клик по кнопке
$('.buttons button').click(function(){
// определяем на какую кнопку нажали и берем ее текст
speed = $(this).text();
// тормозим и перезапускаем таймер
clearInterval(int);
timer_countdown(speed);
});
Из-за того, что переменная time не перезаписывается, время не обнуляется. Таймер просто останавливается и заново запускается с уменьшенным временем и новой скоростью.
Визуально в реальном времени изменяется скорость таймера.
Функция управления таймером
function timer_countdown(speed) {
// выводим текущую скорость таймера
$('h2').empty().append('Скорость: '+speed+' мс');
// запускаем таймер
int = setInterval(function() {
// пока время будет больше 1 (последний тик будет 2-1-off, вместо 1-0-off)
if (time > 1){
// минусуем его на 1
time--
// перезаписываем цифры в нужные места
$('.timer').text('Осталось: '+ time);
$('title').empty().text(time+' '+title);
}else{
// когда время дойдет до 1, останавливаем таймер
clearInterval(int);
// меняем визуал и показываем кнопку перезапуска
$('.timer, title').empty().text('Time over');
$('.restart').show();
}
// наша скорость тут
}, speed);}
Здесь лишь сухой код. Ниже можно скачать рабочий пример и посмотреть как он работает. Реализовано и сверстано в одном файле.
Комментарии