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

День добрый! Подскажите, пожалуйста, имеется код,

  • как можно организовать установку времени(задать время для таймера, точку отсчёта)
  • желаемое время ввести в поле input id="setmin", вывод по нажатию кнопки settime
  • как сделать чтобы по окончанию времени таймер стопался на 00:00:00

var ss = document.getElementsByClassName('stopwatch');

[].forEach.call(ss, function(s) {
  var currentTimer = 0,
      interval = 0,
      lastUpdateTime = new Date().getTime(),
      start = s.querySelector('button.start'),
      stop = s.querySelector('button.stop'),
      reset = s.querySelector('button.reset'),
      mins = s.querySelector('span.minutes'),
      secs = s.querySelector('span.seconds'),
      msec = s.querySelector('span.milliseconds');
  start.addEventListener('click', startTimer);
  stop.addEventListener('click', stopTimer);
  reset.addEventListener('click', resetTimer);


  function pad(n) {
    return ('00' + n).substr(-2);
  }

  function update() {
    var now = new Date().getTime(),
        dt = now - lastUpdateTime;
    currentTimer -= dt;
    var time = new Date(currentTimer);
    mins.innerHTML = pad(time.getMinutes());
    secs.innerHTML = pad(time.getSeconds());
    msec.innerHTML = pad(Math.floor(time.getMilliseconds() / 10));
    lastUpdateTime = now;
  }

  function startTimer() {
    if (!interval) { 
      lastUpdateTime = new Date().getTime();
      interval = setInterval(update, 1);
    }
  }

  function stopTimer() {
    clearInterval(interval);
    interval = 0;
  }

  function resetTimer() {
    stopTimer();
    currentTimer = 0;
    mins.innerHTML = secs.innerHTML = msec.innerHTML = pad(0);
  }
});
<div class="stopwatch">
  <div class="controls">
    <button class="start">Start</button>
    <button class="stop">Stop</button>
    <button class="reset">Reset</button>
  </div>
  <div class="display">
    <span class="minutes">00</span> :
    <span class="seconds">00</span> .
    <span class="milliseconds">00</span>
  </div>
  <input id="setmin" type="number" max="60" min="00" placeholder="00">
  <input id="setsec" type="number" max="99" min="00" placeholder="00">
  <button class="settime">set time</button>
</div>


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