Как сделать таймер на 5 секунд
Обновлено: 02.07.2024
В JavaScript есть функции-таймеры, которые позволяют отсрочить действие или выполнять его через определённый промежуток времени.
Метод setInterval
Для исполнения кода через равные промежутки времени, используется метод "setInterval(X, Y)". В качестве первого параметра X необходимо указать функцию, которая будет исполняться каждые Y миллисекунд. Метод возвращает уникальный идентификатор созданного таймера. Попробуем написать программный код, который выводит в консоль строчку каждые 5 секунд: Если загрузить страницу с таким JavaScript кодом, то в консоле будет писаться строчка 'Мыши любят сыр!' каждые 5 секунд. Чтобы прервать выполнение таймера, необходимо использовать метод "clearInterval(X)". Который удаляет таймер с уникальным идентификатором X. Попробуем написать код секундомера с двумя кнопками (старт и стоп) и окном, в котором считаются секунды. На странице получим такой код: Разберёмся по порядку в этом непростом примере. В первых трёх строчках выводится HTML код текстового окна, в котором записано количество секунд. Ниже стоят две кнопки "Старт" и "Стоп", у которых записаны одноимённые (в переводе на английский) функции в событии "onclick". То есть если кликнуть на эти кнопки мышкой, то отсчёт секунд либо запустится, либо остановится.
После HTML кода начинается код JavaScript, в котором есть три функции. Посмотрим их по порядку. Первая функция - "Timer()". Задача этой функции - увеличивать счётчик секунд на единицу. Для этого она читает содержимое элемента с атрибутом "id" равным "timer" и прибавляет к этому значению единицу. А потом записывает полученное значение обратно в текстовое поле. Обратите внимание, что для того чтобы функция считала значение поле числом, используется функция "parseInt()", которая пытается интерпретировать свой аргумент как число. Если эту функцию не использовать то при прибавлении единицы она будет прибавляться к строке и с каждой секундой таймер просто будет показывать всё более длинную строку из единиц: "11111. ".
Две последние функции - это "start" и "stop". Они запускают и останавливают таймер. Обратите внимание, что id таймера записывается в глобальную переменную "window." для того, чтобы можно было обращаться к ней из разных функций. Иначе id таймера будет доступно только внутри функции "start" и не будет доступен в "stop", поэтому остановить таймер будет невозможно.
Метод setTimeout
Иногда нужно задержать выполнение функции на определённое время. То есть сделать таймер, который отключится после первого срабатывания. Для этого существует метод "setTimeout(X, Y)", который имеет те же самые параметры, что и "setInterval". То есть X - это название функции, которая будет вызвана, а Y - это задержка после которой функция вызова. Попробуем модифицировать предыдущий пример, чтобы продемонстрировать работу метода. поставим задачу: надо увеличивать счётчик через 5 секунд после нажатия на кнопку "Прибавить единицу": Запишите такой пример, загрузите страницу с ним и нажмите на кнопку "Прибавить единицу". Через 5 секунд значение в текстовом поле изменится с 1 на 2 и больше меняться не будет, потому что "setTimeout" срабатывает только один раз.
Данное решение предложил в комментариях Игорь.
Добавляем такие стили в CSS:
В скрипте меняем функцию инициализации таймера function initializeClock(id, endtime) <. >, остальное оставляем так же, как было:
Таймер обратного отсчета времени с рестартом
Таймер установлен на 5 секунд и при окончании времени будет перезапущен еще на 5 секунд
Обратите внимание, что при обнулении таймера нам нужно задать новый дедлайн, и он может быть совсем другим, чем первоначальный, который указан на предпоследней строке кода:
Рабочий пример таймера обратного отсчета времени с рестартом
Рекомендую к прочтению:
Комментарии (140) к “Простой таймер обратного отсчета на Javascript”
Артём
Я закопипастил код. В моем случае надо отсчитывать от 35 до 0 секунд. Таймер считает от 35 до 19 сек, а потом начинает считать в обратном порядке, от 19 до 60
Denis Creative
Никита
А как задать текущее время? Чтоб отсчет таймера шел от реально времени
Denis Creative
Это таймер обратного отсчета. Что вы имеете в виду под “Чтоб отсчет таймера шел от реально времени”?
Никита
Чтобы отсчет шел от времени которое на данный момент и до конечной даты
Denis Creative
По такому примеру таймер будет отсчитывать время до 20 мая
Александр
Подскажите как скрыть таймер когда время вышло?
Игорь
Denis Creative
Игорь
Это вам спасибо уже 3 заказ на фрилансе на основе этого кода )))
Николай
Подскажите, как сделать, чтобы при перезагрузке страницы время таймера не сбрасывалось?
Denis Creative
Таймер должен быть задан в таком случае на конкретную дату:
var deadline="January 01 2019 00:00:00 GMT+0300";
а не на текущее время + время таймера:
var deadline = new Date(Date.parse(new Date()) + 35 * 1000);
Денис
Здравствуйте, отличный таймер, то что надо, подскажите как зациклить таймер, что бы он досчитал до конца и начал заново считать .
Denis Creative
Приведите пример, что нужно. Потому как в статье описаны 2 варианта, которые требуются в 99% использования таймеров.
Денис
Зациклить таймер можно ?
Денис
Так я же написал, что бы по окончанию счета он начал заново считать, а в примерах он заканчивает считать и показывается блок time the up
Denis Creative
заменить на этот:
Рабочий пример добавил в статью
Денис
Здравствуйте, а если такая задача: считать до определённого времени от текущая дата + N дней?
Denis Creative
От текущей даты до + N дней такой код используется:
15 – дни
24 – часы
60 – минуты
Александр
Denis Creative, здравствуйте!
Спасибо Вам за эту статью, она почти мне помогла.
Хотелось бы узнать, если ли возможность чтобы счетчик сбрасывался на сайте каждые два дня Допустим я его выгружаю в 0:00 и он стартует на два дня и потом снова сбрасывается на два дня.
Как я понял ваш вариант он запускается автоматически при загрузке старицы и другой каждый раз надо менять дату в коде.
Denis Creative
Нужно взять код таймера обратного отсчета времени с рестартом и поменять
1. Конечную дату
2. Обновление конечной даты после истечения срока действия таймера
Виталий
Денис. А можете еще подсказать как сделать чтобы таймет продолжал считать в обратном направлении и при этом класс добавлялся к цифрам?
То-есть задача сделать что-то з 10 минут, таймер для тернировки. Если в 10 минут не укоадываются то красным идет обратный отсчет на сколько превысили время?
Denis Creative
Мне кажется, этот таймер не совсем подходит под Вашу задачу.
Здравствуйте, подскажите пожалуйста как сделать чтобы отсчёт шел допустим 2012 года 1 января допустим и до бесконечности? посмотрел в data-countdown на гите , там у них есть пример, но как реализовать так и не понял..
Спасибо.
Denis Creative
Не понял вопрос, как это до бесконечности?
Таймер обратного отсчета предполагает, что есть конечная дата, и ведет отсчет до нее.
Подсчет времени от какой-то даты до текущего момента, это простой таймер. Вам нужен просто таймер? Для этого нужен другой код.
Подскажите, а как в скрипте указать отображение русского языка. У меня ����������� отображается когда меняю на русский текст
Denis Creative
Стоит в шапке, все как надо. Причем вокруг текст на странице русский, нормально отображается, а вот именно текст скрипта ������������ ��������
Denis Creative
Чет не пойму, какой текст скрипта? Если скрипт только цифры выводит…
Dvtcnj Countdown Clock русская фраза, и вместо Hours и пр. Руский шрифт коверкается.
Denis Creative
Эти фразы не в скрипте, а в HTML используются.
Проверьте кодировку файла, чтобы там было UTF-8 без BOM.
санек
как сделать чтобы он не запускался сам?
Denis Creative
а как он должен запускаться?
санек
Denis Creative
это вам нужен обычный таймер, наверное
Владимир
Добрый день. А как сделать чтобы счетчик времени начинался с 02 часов 35 мин 25 сек?
Владимир
точнее таймер с обратным отчетов начинался 02:35:24
Denis Creative
2*60*60 + 35*60 + 24 = 9324 секунды
Нурбек
у меня ничего не выводит –
Может устарела библиотека?
Denis Creative
Тут нечему устаревать – проверьте свой HTML
Павел
Чтобы не возникала ошибка
Необходимо поместить в конец страницы, перед закрывающим тэгом
Эта ошибка чаще всего происходит, когда вы обращаетесь к свойствам объекта раньше, чем объект готов: Скорее всего, объект ещё не загрузился, а скрипт его требует прямо сейчас. Строка:
Анастасия
А как сделать что бы таймер который по окончанию времени начинает отсчет заново (последний вариант) не скидывал время при обновлении страницы?
Т.е. мне надо чтоб он отсчитывал допусти 24 часа с 00:00:00 и в полночь отсчет опять обнулялся бы. А то сейчас получается что если ставить 12 часов отсчета при обновлении страницы опять 12 часов, а не 11:58
Denis Creative
Анастасия
Спасибо. Сначала почему то не получилось, но теперь все работает!
Denis Creative
Только там пример для 2-ух дней, вам нужно изменить 2 на 1, чтобы было для одного дня.
Максим
Здравствуйте! Стоит такая задача. Таймер обратного отсчета, но что бы он отсчитывал до 15 числа каждого месяца до 19.00. Потом перезапускался и снова отсчитывал до 15 числа 19.00 следующего месяца. И так постоянно. Просто если поставить 30 дней а в месяце будет 31 то получиться что таймер не правильно будет считать
Denis Creative
Напишите функцию, которая будет по текущему месяцу высчитывать правильное количество дней и время до окончания.
Андрей
Здравствуйте! А как сделать так, что бы текущему времени добавить еще несколько секунд? Когда добавляю по кнопке запуск функции initializeClock(‘clockdiv’, deadline); – то считает уже два времени одновременно. Как остановить(убрать) первый отсчет времени? или обновить его
Denis Creative
Создайте пример на Codepen – будет понятнее, что вы имеете в виду.
Петро
Когда цепляете запуск функции к кнопке, то убирайте запуск функции в конце самого кода таймера
Михайл
Спасибо! То что нужно ) Искал, но попадалось всякое. Мне нужна была фишка с указыванием GMT+0300 а то для разных стран показывалось разные значения )
Денис, здравствуйте. Смотрите, у меня два счётчика на сайте, что мне сделать, чтобы второй счётчик не слетел? Пожалуйста помогите
Denis Creative
Задать им разные id .
При этом весь скрипт копировать не нужно, просто инициализировать второй таймер отдельно initializeClock('countdown-2', deadline);
Спасибо вам большое, Денис. Пост 17 года, а вы до сих пор помогаете другим. А таймер вообще очень хороший :)
Denis Creative
Рад, что информация на сайте полезна для кого-то)
Павел
Здравствуйте! Подскажите пожалуйста, нужен циклический таймер, на 15 дней, но чтобы при перезагрузке страницы время таймера не сбрасывалось. Возможно такое реализовать?
Denis Creative
Можно, если использовать куки.
Василий
Алексей
Было бы круто если дописать вывод слов (дни, часы, минуты, секунды) на js и проверять текущее значение времени и выводить корректное слово например 43 минуты или 25 минут. Думаю посыл понятен.
Denis Creative
Тогда это уже не будет “Простой таймер обратного отсчета на Javascript”.
Соломон
Здравствуйте ! Спасибо за таймер. Подскажите , пожалуйста, как изменить код , чтоб число дней могло быть трёхзначным .
Спасибо.
Denis Creative
А в чем проблема?
Выводится трехзначное число
Соломон
Denis Creative
Добрый день, подчистив немного Ваш код и заменив переменную deadline :
var deadline="January 01 2022 00:00:00 GMT+0300";
получаем вполне рабочий вариант с трехзначным форматом для дней.
В Codepen во вкладке HTML нужно добавлять только код HTML внутри тега , во вкладке CSS нужно следить за правильным открытием и закрытием скобок, а во вкладке JS не должно быть ничего лишнего кроме кода Javascript.
Соломон
Уважаемый Денис! Огромное спасибо! Желаю Вам здоровья и успехов!
Denis Creative
Олександр
Здравствуйте а как сделать так чтобы скрипт отсчитывал от введенной даты 7 дней и писал осталось
например ведена дата 2019-10-1 , отсчитывал этой даты 7 дней и выводил оставшихся дней, часов,… до читал до ноля после останавливался
Denis Creative
Просто немного изменить скрипт, или заказать нужный скрипт на фрилансе.
Олександр
вопрос как изменить)))
Олександр
или боле точнее вы может его так изменить? сам наверное не допру((((
Denis Creative
Извиняюсь, нет времени разбираться, может кто-то здесь ответит, но лучше обратиться на фриланс.
Олександр
понятно печально, спасибо за помощь врядли тут кто-та поможет, а можно взять ваш код и обратиться за помощью на другие ресурсы??
Denis Creative
Да, конечно, успехов!
Алиса
А как остановить таймер, когда время закончится (будет значение во фронте 0:0:0:0, чтобы в минус не уходило)?
Сергей
Сергей
Спасибо! Отлично! Встроил его в компонент в битриксе. Крутое и простое в реализации решение!
Розалия
Denis Creative
Нужно поменять функцию updateClock()
Розалия
Спасибо большое! Всё работает правильно.
Александр
Денис, здравствуйте а как сделать так же только 2 дня.
А то тот что выше не работает(
Denis Creative
Всё работало, сделайте на codepen пример, будет видно, что не работает и почему.
viktor
всё отлично работает.Скрипт вставил себе на сайт, и просто повставлял себе в код ID и class, и все отлично заработало. Спасибо.
Dennis
Denis Creative
Проверьте все классы и их правильное использование в javascript-коде. Данный таймер работает во всех браузерах.
Dennis
Вопрос решил! Была проблема с форматом даты, вместо “March 15 2020 00:00:00 GMT+0300” я указал ‘Sun, 15 Mar 2020 00:00:00 GMT’ и таймер заработал
Denis Creative
Виктор
Интересный модуль, но есть вопрос. Можно как то на сайте добавить 2 раза тот же модуль 1 с тайм енд с текстом об етом и 2 с тайм рестарт? У меня конфликт получается.
Denis Creative
добавить разные ID для блоков таймеров и соответственно, и будет 2 функции
и будут две инициализации
В HTML будет 2 таймера
Остальной код по идее можно оставить. Главная идея в разных ID.
Виктор
проверяю по разному но нет отображения времени,что то видимо не так.
Denis Creative
Проверьте классы, id, и код в скрипте.
Vadim
Добрый день, все круто, спасибо.
Но есть один момент. Стоит задача сделать таймер на два времени.
12:00 и 20:00 то есть как только время достигает 12:00 таймер должен начинать считать до 20:00 и такое период каждый день.
За ранее спасибо.
Denis Creative
Обратитесь на фриланс, я делал разные варианты только для часто используемых таймеров.
Bublik
Спасибо за таймер, благодаря тебе выполнил около десятка версток с знанием лишь html/css))
Denis Creative
Успехов! Но jquery тоже желательно подучить, там ничего сложного нету.
Ксения
Спасибо, все понятно и просто
ПОМОГИ
ПОЧЕМУ У МЕНЯ НЕ РАБОТАЕТ ТАЙМЕР ЧТО НАДА ДЕЛАТЬ ПЛИЗ ПОМОГИ
Denis Creative
В статье все подробно расписано. Нужно HTML код вставить в свой HTML файл, а CSS в свой файл стилей, javascript нужно закинуть в свой файл скриптов и не забыть подключить jquery. Все просто.
Александр
Не работает все равно
Сергей
При попытке отписаться от комментариев в этой ветке у тебя на сайте возникает ошибка.
Denis Creative
Елена
Здравствуйте!
Спасибо за Ваш таймер, получилось его настроить под свои нужды, но беда в том, что мне нужно его сбрасывать, если пользователь логинится на сайте.
То есть, я при инициализации автоизации вызываю функцию cancelTimer
в надежде, что отработает if в функции initializeClock и таймер очистится.
Но почему-то clearInterval(timeInterval); не отрабатывает.
Я думала, что это из-за области видимости, но у меня никак не получается с этим разобраться, даже если вынести let timeInterval из функции в глобальную область видимости.
Вот мой код инициализации таймера:
Буду очень благодарна за любую подсказку
скажите почему нечего не работает все подключил и ввел. А таймер не запускается.
Denis Creative
Залейте страницу со всем кодом таймера на какой-нибудь тестовый сервер, чтобы можно было ответить.
У всех работает, значит нужно искать у вас ошибку.
Содержание:
Шаг 1
Откроем Visual Studio и создадим приложение Windows Forms.
Шаг 2
Добавим в форму два элемента управления Button и назовем их Start и Stop , хотя имена вы можете написать любые, по своему усмотрению. Окончательная форма выглядит следующим образом:
Шаг 3
Теперь давайте добавим в нашу программу элемент управления Timer . Перетащим его из Visual Studio Toolbox в форму. С помощью такой нехитрой манипуляции в нашей форме появится элемент – timer1 .
Шаг 4
1 секунда = 1000 миллисекунд.
Шаг 5
Теперь нужно нажать кнопку Events и добавить обработчик событий Timer , дважды щелкнув по свойству Tick . Событие таймера здесь — timer1_Tick (как показано на изображении ниже).
Шаг 6
Теперь добавим классы FileStream и StreamWriter в начало нашей программы. Они используются для создания нового текстового файла и реализации записи данных в него. Все классы определены в библиотеке базовых классов System.IO , поэтому обязательно импортируйте System.IO в начале программы.
Мы видим из предыдущего участка кода, что класс FileStream создает файл mcb.txt на диске C , а StreamWriter определен для записи в него данных. Теперь напишем алгоритм реализации записи нескольких строк в наш файл:
Ту же процедуру проделываем и с кнопкой STOP , только в этом случае свойству Enabled устанавливаем значение false для прекращения выполнения нашего события.
Остался последний шаг — создать событие timer1_Tick , записывающее текущую дату в текстовый файл:
Шаг 7
Мы только что разобрали, как использовать таймер в начале разработки приложения с помощью визуального конструктора Visual Studio. Но иногда вам может потребоваться программно использовать таймер во время выполнения этого приложения.
Например: создадим такой таймер, установим ему необходимые свойства, а также добавим обработчик событий, интервал сделаем равным 2 секундам:
Допустим, мы хотим отобразить текст в элементе управления ListBox . Следующий код добавляет текст и обновляет ListBox каждые 2 секунды:
Класс Timer также можно использовать, если вы хотите вызывать событие через заданный промежуток времени:
Событие в предыдущем примере будет запускаться каждые 5 секунд.
Резюме
Закрепить приведенный материал можно на базе таких видео:
На нашем сайте можно бесплатно воспользоваться различными сервисами, связанными со временем: это онлайн-будильник, таймер, секундомер, метроном, онлайн-календарь и служба точного времени.
Использование таймера
Если в компьютере или мобильном устройстве нет под рукой таймера, можно запустить онлайн-таймер прямо на нашем сайте с монитора ПК.
Функцию таймера удобно использовать для:
- домашних тренировок и дозирования физической нагрузки;
- при работе над какими-либо задачами;
- при приготовлении кулинарных блюд, где важно строго придерживаться рецептуры;
- актуален данный сервис для спортсменов - благодаря таймеру можно засекать определенные промежутки времени для эффективного выполнения упражнения.
Онлайн таймер со звуком – удобный сервис, который круглосуточно под рукой. Пользуясь любым браузером, можно настроить таймер в онлайн-режиме без необходимости загружать программу для компьютера или гаджета. Запрограммированный таймер на нашем сайте позволит выставить время от секунды и дольше - верхний предел отсутствует.
Краткая история таймера
Таймер – это специальное устройство, назначением которого является обратный отсчет времени. Механизм действия основан на секундном шаге и шкале времени. Пользуясь интуитивно понятной шкалой, можно выставить необходимые показатели время, по прошествии которого обычно подается сигнал и прибор останавливается.
Изобретение таймера связано с историей первого секундомера. Английский часовщик Клемент в 1676 году открыл систему якорно-анкерного спуска в часах. На оси этого маятника были приспособлены зубцы, которые, попадая в ходовое колесо, запускали механизм. Создание маятникового регулятора Гюйгенса привнесло в работу над секундомерами и таймерами некоторое усовершенствование. Затем на основе механических часов французский мастер Луи Муане в 1815 году занялся исследованиями хронометража времени и возможности запускать отсчет. Результатом его трудов стал первый механический аналог современного таймера. Усовершенствовал таймер английский часовщик Роберт Гук, введя в конструкцию балансирный механизм.
- Таймеры используют для контроля за системами освещения объектов, витрин, рекламных вывесок, программируют таймер и для дозированной подачи корма и воды в аквариумах и террариумах.
- Также применяют таймер для правильного и регулярного полива растений, включения и отключения обогревательных систем.
- На таймер выставлены заводские сигналы и школьные звонки.
- Используется это устройство для имитации эффекта присутствия. Случается, для защиты дома владельцы оставляют таймеры, включающие свет или радио для предотвращения краж и отпугивания злоумышленников от дома или квартиры.
- Также таймер управляет различными электроустройствами, системами питания электроприборов.
Инструкция пользования онлайн-таймером
Чтобы воспользоваться сервисом, необходимо пройти в раздел Таймер-онлайн, нажав соответствующую кнопку. Перед вами возникнет окно установки времени. Необходимо выбрать либо ввести вручную требуемое количество минут (1, 2, 5, 10, 15, 30, 60, 120) и секунд. Далее стоит нажать зеленую кнопку, и обратный таймер времени будет запущен.
При необходимости можно легко остановить отсчет времени, нажав красную кнопку. Либо установить таймер снова, сбросив предыдущие показатели. По истечении установленного ранее времени прозвучит звуковой сигнал.
Функции онлайн-таймера
- Звуковой сигнал необходим, если у вас нет возможности в процессе тренировки, решения задач, приготовления блюд смотреть на экран и отслеживать точный отсчет.
- Онлайн-таймер может быть использован при необходимости как встроенный будильник.
- Также можно пользоваться таймером, если нужно замерить частоту пульса в течение нескольких минут.
- Важна функция таймера как напоминание о необходимости выключить чайник, завершить какую-либо задачу, принять лекарство.
- С помощью таймера будут корректными результаты мини-соревнований – например, в детских играх, при сборе головоломки, для развлечений на семейном празднике.
Пользуясь сервисами нашего сайта, вы всегда будете эффективно использовать главный ресурс своей жизни – время! С нами легко успевать вовремя, знать точное время, держать под рукой секундомер!
Читайте также: