1

Была задача - создать 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);

});
1
  • 1
    Ну батенька... вы интервал сюда положили window.timerId, а останавливаете timer
    – SwaD
    Commented 13 февр. 2023 в 17:55

2 ответа 2

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>

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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.