jQuery — таймер обратного отсчета с изменяемой скоростью

jquery countdown timer 620x400 - jQuery — таймер обратного отсчета с изменяемой скоростью

Рассмотрим наглядный пример управления таймером на jQuery.

Задача: Таймер запускается при загрузке страницы. При клике на кнопку с числом скорость изменяется в реальном времени. По окончании времени появляется кнопка перезапуска таймера. Счетчик продублировать на вкладку в TITLE

Где применимо: Нигде. В представленном виде jQuery таймер применять негде, но взять из него код для решения других задачи очень даже можно. Например, можно переделать его в казино

jquery countdown timer stopped 620x435 - 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);}

Здесь лишь сухой код. Ниже можно скачать рабочий пример и посмотреть как он работает. Реализовано и сверстано в одном файле.

Похожие записи


JS — скрыть внешние ссылки на сайте
Очень простой скрипт для скрытия внешних ссылок на любом сайте. Разрабатывался для CMS WordPress, но будет работать абсолютно везде. Полностью...
jQuery Cookies — ограничиваем повтор события с помощью куков
Cookies — возможность сохранить в браузере некие данные, которые не удалятся после обновления страницы. Задача: отследить с помощью javaScript фиксированное...
jQuery — очищаем поле с результатом после каждого выполненного события
Уже после написаний данной статьи случайно наткнулся на реальный пример описанного здесь простейшего косяка в jQuery коде. Это известный онлайн...
jQuery — простое модальное окно
В данной статье расскажу про очень простое решение с модальным окном на jQuery. Прикручивал его поверх платного конструктора шаблонов сайта...
Telegram — отправка данных в чат с сайта с помощью jQuery и Ajax + защита через Cookies
HTML форма, которую обрабатывает jQuery, записывает данные в Cookies и если все ОК — пересылает данные в Telegram с помощью...

Комментарии

Добавить комментарий