Содержание

javascript — Как добавить clearInterval к ​​моему таймеру JS?

Я сделал таймер на JavaScript, но при повторном нажатии кнопки запуска он продолжает работать быстрее. Я знаю, что clearInterval используется, чтобы остановить это, но в зависимости от того, где я поместил его в код, он либо полностью останавливает работу таймера, либо не имеет значения. Вот код, я поставил его на четвертой строке, но он ничего не делает:

 вар минут;
вар секунд;
функция PomodoroBreak(x){
    clearInterval (интервал)
    минуты = х;
    секунды = 0;
    
    переменный интервал = setInterval(
        функция () {
            var el = document.getElementById("таймер")
            если (секунды == 0 && минуты == 0){
                clearInterval (интервал)
                эл.innerHTML = "00:00"
                
            }
            иначе если (секунды == 0) {
                минуты = минуты -1;
                секунды = 59el.innerHTML = минуты + ":" + секунды
            }иначе, если (секунд > 0){
                секунды = секунды -1;
                el.
innerHTML = минуты + ":" + секунды document.title = минуты + ":" + секунды } }, 1000 ) }

Куда его положить вместо этого, или я что-то не так сделал? Спасибо!

  • javascript
  • таймер
  • setinterval
  • интервал очистки

1

Я вижу, что здесь нужно внести некоторые коррективы. Я считаю, что возвращение clearInterval с объявленным выше startTimer должно работать. Надеюсь это поможет.

 функция PomodoroBreak(x){
    вар минут = х;
    вар секунд = 0;
    пусть startTimer = setInterval(...,1000)
    вернуть clearInterval (startTimer)
}
 

0

Я думаю, вам следует объявить переменную «интервал» вне функции. И удалите переменную в функции.

 вар минут;
вар секунд;
вар интервал;
функция PomodoroBreak(x){
clearInterval (интервал)
минуты = х;
секунды = 0;
интервал = установить интервал (
    функция () {
        var el = document. getElementById("таймер")
        если (секунды == 0 && минуты == 0){
            clearInterval (интервал)
            эл.innerHTML = "00:00"
            
        }
        иначе если (секунды == 0) {
            минуты = минуты -1;
            секунды = 59el.innerHTML = минуты + ":" + секунды
        }иначе, если (секунд >
0){ секунды = секунды -1; el.innerHTML = минуты + ":" + секунды document.title = минуты + ":" + секунды } }, 1000 ) }

0

Зарегистрируйтесь или войдите

Зарегистрироваться через Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

10 лучших плагинов таймера обратного отсчета в JavaScript (обновление 2023 г.

)

Вы когда-нибудь хотели добавить таймер обратного отсчета на свой веб-сайт? Популярность этого плагина в последние несколько лет росла. Таймер обратного отсчета предназначен для отображения определенного времени до наступления события.

Существует множество плагинов обратного отсчета. Составление этого списка лучших плагинов обратного отсчета JavaScript (jQuery и Vanilla JS) было забавным проектом.

В этом сообщении блога я собираюсь продемонстрировать список из 10 лучших плагинов обратного отсчета JavaScript (jQuery и Vanilla JS), которые можно использовать, чтобы сообщить посетителю, сколько дат, времени и продуктов осталось до события. Наслаждаться.

Если вы ищете плагин обратного отсчета в стиле ретро, ​​см. Лучшие плагины обратного отсчета в стиле флип-часов в JavaScript Плагины обратного отсчета

  • Библиотеки обратного отсчета Vanilla JS
  • Лучшие плагины обратного отсчета jQuery:

    Плагин простого обратного отсчета даты

    Простой, универсальный, настраиваемый плагин обратного отсчета jQuery для Интернета.

    [Демо] [Скачать]


    Классный плагин обратного отсчета в стиле механического табло для jQuery — Обратный отсчет

    Классный и простой плагин jQuery для создания таймера обратного отсчета в стиле механического табло для отображения оставшегося времени в секундах, минутах, часах и дней до любой даты.

    [Демо] [Скачать]


    Минимальный jQuery Плагин таймера обратного отсчета любой даты — обратный отсчет

    Еще один плагин обратного отсчета jQuery, который показывает, сколько лет, дней, часов, минут и секунд осталось от заданной даты/времени , с поддержкой обратного вызова и смещения времени. Полностью стилизуется через CSS.

    [Демо] [Скачать]


    Настраиваемый плагин таймера обратного отсчета Для jQuery — обратный отсчет

    Простой плагин для создания настраиваемого таймера обратного отсчета, который поддерживает стандартные/компактные форматы или пользовательский макет.

    [Демо] [Скачать]


    Простой плагин таймера обратного отсчета с jQuery — simple.

    timer.js

    Простой плагин таймера обратного отсчета jQuery с возможностью выполнения функции обратного вызова для пользовательского поведения по тайм-ауту.

    Скачать демоверсию


    Лучшие плагины обратного отсчета Vanilla JS:

    Классический стиль флип-часов Библиотека обратного отсчета и счетчика — flip.js

    Компонент обратного отсчета и счетчика в ванильном JavaScript и CSS.

    [Демо] [Скачать]


    easytimer.js

    easytimer.js — это простая в использовании библиотека таймеров/обратных отсчетов/хронометров, построенная на чистом JavaScript, которая позволяет считать до или от заданного значения. с поддержкой обратного звонка.

    Загрузить демоверсию


    Ретро-таймер обратного отсчета на языке JavaScript – flipdown.js

    Легкий, отзывчивый, высокопроизводительный плагин обратного отсчета для создания ретро-часов обратного отсчета, которые показывают, сколько дней/часов/минут/ секунд до события, которое вы предоставляете.

    [Демо] [Скачать]


    canvas-circular-countdown

    Нарисуйте настраиваемый круговой таймер обратного отсчета холста.

    [Демо] [Скачать]


    Простой таймер обратного отсчета в ванильном JavaScript — ysCountDown.js

    Простой плагин таймера обратного отсчета JavaScript для обратного отсчета времени в ДНЯХ, ЧАСАХ, МИНУТАХ, СЕКУНДАХ.

    [Демо] [Скачать]


    Вывод:

    После того, как вы выбрали плагин, который лучше всего соответствует вашим потребностям, использовать его очень просто. Некоторые из них имеют параметры настройки, но многие из них требуют лишь простого вызова плагина в вашем коде. Помните, что почти все можно изменить, отредактировав код. Для получения дополнительной информации об этом прочитайте документацию или комментарии к репозиторию для выбранного вами плагина.

    Дополнительные ресурсы:

    Ищете дополнительные плагины jQuery или библиотеки JavaScript для создания потрясающих таймеров обратного отсчета в Интернете и на мобильных устройствах? Дополнительные сведения см.