Запуск таймера по нажатию кнопки JS

Question

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

let input = document.querySelector('#input');
let button = document.querySelector('#button');
let number = document.querySelector('#number');


button.addEventListener('click', function() {
    let i = 0;

    let timerId = setInterval(function() {
        let currentCount = parseInt(number.textContent);
        number.textContent = currentCount + 1;
    }, 1000);
});

Answer 1

Замени number.textContent на input.value.

PS: Что у всех за привычка использовать parseInt? Хотя, может он тут немного в тему...

Answer 2

А можно ещё использовать requestAnimationFrame:

const myForm = document.querySelector('#myForm.myForm');
const output = document.querySelector('.output');
let animFrame = null;
let startTime = null;
let startTimePlus = 0;

function animationFunc(timestamp) {
  if (!startTime) startTime = timestamp;
  const progress = timestamp - startTime;
  const resultTime = (Math.floor(progress/ 100) + startTimePlus*10) / 10;
  output.innerHTML = `Прошло секунд: ${resultTime} c`;
  animFrame = requestAnimationFrame(animationFunc);
};

function animate(start) {
  startTimePlus = start;
  animFrame = requestAnimationFrame(animationFunc);
};

function funcSubmitFormEvent(e) {
  e.preventDefault();
  const targetForm = e.target;
  
  const num = +targetForm['input-number'].value;
  startTime = null;
  animate(num);
};

myForm.addEventListener('submit', funcSubmitFormEvent);

* {
  box-sizing: border-box;
}

:root {
  --transitionDuration: 0.3s;
  --transitionTimingFunction: ease;
}

body {
  margin: 0;
  font-size: 16px;
  font-family: sans-serif;
}

.input-text {
  width: 100%;
  outline: none;
  border-radius: 0px;
  border: 2px solid grey;
  padding: 5px 10px;
  font-size: inherit;
  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
  transition-property: border-color;
}

.input-text:focus {
  border-color: black;
}

.btn {
  display: inline-block;
  background-color: black;
  border: 2px solid black;
  border-radius: 0;
  outline: none;
  cursor: pointer;
  color: white;
  padding: 5px 10px;
  font-size: inherit;
  transition-timing-function: var(--transitionTimingFunction);
  transition-duration: var(--transitionDuration);
  transition-property: color, border-color, background-color;
}

.btn:hover {
  color: black;
  border-color: black;
  background-color: white;
}

.btn:active {
  background-color: #9e9e9e;
  border-color: #9e9e9e;
  color: white;
}

.myForm {
  max-width: 200px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

<form id="myForm" class="myForm">
  <input class="input-text" type="number" id="input-number" name="input-number" placeholder="Введите число" value="0">
  <input type="submit" class="btn" value="Начать анимацию">
  <div class="output"></div>
</form>

БЛОГ НА HUSL

Запуск таймера по нажатию кнопки JS

Ответы (2 шт):