Как задать время отсчета таймера на javascript?

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

Подскажите пожалуйста, как задать время таймера с помощью кнопки? Таймер написан, время задаю в коде. Есть также три картинки. Необходимо изменять (задавать) время таймера в зависимости от выбора картинки. То есть, если пользователь выбирает первую картинку, то таймер одна минута, вторую - две минуты и т.д.
Сам таймер запускается через отдельную кноку старт.

Код таймера:

let timer = 0.1;
let amountTime = timer * 60;

function calculateTime (){
  const countdown = document.querySelector("#countdown");

  let minutes = Math.floor(amountTime/60);
  let seconds = amountTime%60;

  if (seconds < 10){
    seconds = "0" + seconds;
  }

  if (minutes < 10){
    minutes = "0" + minutes;
  }

  countdown.textContent = `${minutes}:${seconds}`;
  amountTime--;

  if (amountTime < 0) {
    stopTimer();
    amountTime = 0;
  }

  function stopTimer(){
    clearInterval();
  }
}

const btn = document.querySelector("#btn");
btn.addEventListener('click', startTimer);

function startTimer () {
  setInterval(calculateTime,1000);
}

Мне нужно переменную timer задавать через выбор картинки (нажатие кнопки) пользователем.

Код кнопок в HTML:

<div id="container">
  <div id="buttons">
    <button id="button1" value="5">SOFT-BOILED</button>
    <img src="Picture1.jpg" alt="">
  </div>
  <div id="buttons">
    <button id="button2" value="6">MEDIUM-BOILED</button>
    <img src="Picture2.jpg" alt="">
  </div>
  <div id="buttons">
    <button id="button3" value="7">HARD-BOILED</button>
    <img src="Picture3.jpg" alt="">
  </div>
</div>

Ставлю addEventListener на все три кнопки - не срабатывает.

javascript время таймер
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Можно сделать таким образом..

let timer = 0.1;
let amountTime = timer * 60;

function calculateTime() {
  const countdown = document.querySelector("#countdown");

  let minutes = Math.floor(amountTime / 60);
  let seconds = amountTime % 60;

  if (seconds < 10) {
    seconds = "0" + seconds;
  }

  if (minutes < 10) {
    minutes = "0" + minutes;
  }

  countdown.textContent = `${minutes}:${seconds}`;
  amountTime--;

  if (amountTime < 0) {
    stopTimer();
    amountTime = 0;
  }

  function stopTimer() {
    clearInterval();
  }
}
const btns = document.querySelectorAll("button");
btns.forEach(btn => btn.addEventListener('click', startTimer));

function startTimer(e) {
let btn = e.target
console.log('countdown!', btn);
amountTime = btn.value * 60;
  setInterval(calculateTime, 1000);
} 
<div id="container">
  <div id="buttons">
    <button id="button1" value="5">SOFT-BOILED</button>
    <img src="Picture1.jpg" alt="">
  </div>
  <div id="buttons">
    <button id="button2" value="6">MEDIUM-BOILED</button>
    <img src="Picture2.jpg" alt="">
  </div>
  <div id="buttons">
    <button id="button3" value="7">HARD-BOILED</button>
    <img src="Picture3.jpg" alt="">
  </div>
  <div id="countdown">00:00</div>
</div>