Просто хотел спросить, как создать максимально простой таймер обратного отсчета.
На сайте будет предложение:
«Регистрация заканчивается через 05:00 минут!»
Итак, я хочу создать простой таймер обратного отсчета js, который переходит с «05:00» на «00:00», а затем сбрасывается до «05:00» после его окончания.
Раньше я просматривал некоторые ответы, но все они кажутся слишком интенсивными (объекты Date и т. Д.) Для того, что я хочу сделать.
setInterval
и сделать это на основе .innerHTML, а не на основе даты.Ответы:
У меня есть две демонстрации, одна с,
jQuery
а другая без. Ни один из них не использует функции даты и настолько прост, насколько это возможно.Демо с ванильным JavaScript
Демо с JQuery
Однако, если вам нужен более точный таймер, который немного сложнее:
Теперь, когда мы сделали несколько довольно простых таймеров, мы можем начать думать о возможности повторного использования и разделения проблем. Мы можем сделать это, спросив "что должен делать таймер обратного отсчета?"
Итак, имея в виду, давайте напишем лучше (но все еще очень просто)
CountDownTimer
Так почему же эта реализация лучше других? Вот несколько примеров того, что вы можете с этим сделать. Обратите внимание, что все, кроме первого примера, не могут быть достигнуты
startTimer
функциями.Пример, который отображает время в формате XX: XX и перезапускается после достижения 00:00
Пример, который отображает время в двух разных форматах
Пример, который имеет два разных таймера и только один перезапускает
Пример запуска таймера обратного отсчета при нажатии кнопки
источник
minutes = minutes < 10 ? "0" + minutes : minutes;
var
объявления разделяет разные объявления. такminutes
иseconds
просто объявляются (но не инициализируются) переменные. такtimer
что просто равенduration
параметру, ни больше, ни меньше.Если вам нужен настоящий таймер, вам нужно использовать объект даты.
Рассчитайте разницу.
Отформатируйте вашу строку.
пример
Jsfiddle
не очень точный таймер
JsFiddle
источник
Вы можете легко создать функцию таймера с помощью setInterval.Below - это код, который вы можете использовать для создания таймера.
http://jsfiddle.net/ayyadurai/GXzhZ/1/
источник