Таймер с обратным отсчетом на JavaScript

Question

Таймер с обратным отсчетом на JavaScript

Рейтинг: 1Ответов: 2Опубликовано: 13.02.2023

Была задача - создать HTML-страницу с полем для ввода числа, кнопкой и div-элементом с числом 0. В поле для ввода должно вводиться число секунд, а кнопка должна запускать таймер. При запуске таймера число в div-элементе должно замениться на введённое в поле. Затем каждую секунду оно должно уменьшаться на единицу до тех пор, пока не дойдёт до 0. При этом таймер должен корректно работать, если во время его работы пользователь запускает его заново. Я присвоил инпуту класс .time-input, кнопке - класс .time-button, и диву - .time-block.
После достижения нуля таймер не остановился, то есть clearInterval почему-то не сработал.

document.addEventListener('DOMContentLoaded', function () {
  let timeInput = document.querySelector('.time-input');
  let timeButton = document.querySelector('.time-button')
  let timeBlock = document.querySelector('.time-block');
  function inputTime() {
    timeBlock.textContent = timeInput.value;
  }

  function timer() {
    timeBlock.textContent = parseInt(timeBlock.textContent) - 1;
  }


  function start() {
    if(parseInt(timeBlock.textContent) >  0) {
      window.timerId = setInterval(timer, 1000);
    }else{
       clearInterval(timer);
    }
    return;
  }
  timeButton.addEventListener('click', start);

  timeInput.addEventListener('input', inputTime);

});

javascript таймер clearinterval

Источник: Stack Overflow на русском

Answer 1

▲ 1Принят

Вот более правильная реализация таймера. Если повторно нажать на кнопку старт, старый остановится, а новый запустится

document.addEventListener('DOMContentLoaded', function () {
  let timeInput = document.querySelector('.time-input');
  let timeButton = document.querySelector('.time-button')
  let timeBlock = document.querySelector('.time-block');
  function inputTime() {
    timeBlock.textContent = timeInput.value;
  }

  let timerID;
  function start() {
    clearInterval(timerID); // Сбрасываем таймер
    let time = parseInt(timeInput.value); // Запоминаем исходное значение
    timerID = setInterval(function() {
      const res = --time; // Каждый вызов уменьшаем
      timeBlock.textContent = res; // Выводим результат
      if (!res) clearInterval(timerID);
    }, 1000)
  }
  timeButton.addEventListener('click', start);

  timeInput.addEventListener('input', inputTime);

});

<input class='time-input'><br />
<div class='time-block'></div><br/><br />

<button class='time-button'>Старт</button>

Answer 2

▲ 0

В итоге преподаватель одобрил вот такое решение - без двух обработчиков событий:

 document.addEventListener('DOMContentLoaded', function () {
  let timerInput = document.querySelector('.time-input');
  let timerButton = document.querySelector('.time-button');
  let timerBlock = document.querySelector('.time-block');

  let inter;
  timerButton.addEventListener('click', timer);

  function timer() {
    clearInterval(inter);
    timerBlock.textContent = timerInput.value;
    let timeval = Number(timerInput.value);
    function interval() {
      timeval--;
      timerBlock.textContent = timeval;
      if (timeval === 0) {
        clearInterval(inter);
      }
    }
    inter = setInterval(interval, 1000);
  }
});

<input class="time-input" type="text">
  <button class="time-button">START</button>
  <div class="time-block">
    0
  </div>

Таймер с обратным отсчетом на JavaScript

Ответы