Как запустить таймер с нуля?

249

11 июля 2017, 22:56

Доброго времени суток. Необходимо запустить таймер с нуля минут и нуля секунд, а по нажатию на кнопку, остановить его и записать значение.

var timerId; 
 
function update() { 
  var clock = document.getElementById('timer'); 
 
  var start = new Date(0000, 0, 0, 0, 0, 0, 000); 
 
  var minutes = start.getMinutes(); 
  if (minutes < 10) minutes = '0' + minutes; 
  clock.children[0].innerHTML = minutes; 
 
  var seconds = start.getSeconds(); 
  if (seconds < 10) seconds = '0' + seconds; 
  clock.children[1].innerHTML = seconds; 
} 
 
function clockStart() { 
  setInterval(update, 1000); 
  update(); 
} 
 
clockStart();

<div id="timer"> 
  <span class="minutes"></span> 
  <span class="seconds"></span> 
</div>

Answer 1

Если вкратце, значение тайм-аута записываем в переменную, clearTimeout функция которая останавливает тайм-аут, в нее передаем это значение

Переменную _start я вынес с функции update() потому что, если она будет внутри функции то будет при каждом вызове создаваться новая и у нас не получится сделать таймер.

ПС: в код добавил чуть-чуть комментариев, если что непонятно, спрашивайте

Как-то так :

document.addEventListener("DOMContentLoaded", function(event) { 
  var timerId; 
  var _start = new Date(0000, 0, 0, 0, 0, 0, 000); 
  var clock = document.getElementById('timer'); 
 
  function update() { 
    _start.setSeconds(_start.getSeconds() + 1); 
 
    var minutes = _start.getMinutes(); 
    if (minutes < 10) minutes = '0' + minutes; 
 
    clock.children[0].innerHTML = minutes; 
 
    var seconds = _start.getSeconds(); 
    if (seconds < 10) seconds = '0' + seconds; 
 
    clock.children[1].innerHTML = seconds; 
  } 
 
  var start = document.querySelector('#start'); 
  var stop = document.querySelector('#stop'); 
  var reset = document.querySelector('#reset'); 
    
  start.addEventListener('click', function() { 
    if (!timerId) { 
      // записываем значение нашего таймера в переменную 
      timerId = setInterval(update, 1000); 
    } 
  }); 
 
  stop.addEventListener('click', function() { 
    // останавливаем выполнение функции 
    // и очищаем переменную интервала, чтобы в функции запуска проверять запущен ли таймер 
    // так как clearTimeout возвращает undefined то это то что надо 
    timerId = clearTimeout(timerId);        
    console.log(clock.children[0].innerHTML + ':' + clock.children[1].innerHTML); 
  }); 
   
  reset.addEventListener('click', function() { 
    clearTimeout(timerId); 
    timerId = undefined;  
    _start = new Date(0000, 0, 0, 0, 0, 0, 000); 
 
    clock.children[0].innerHTML = '00'; 
    clock.children[1].innerHTML = '00'; 
  }); 
 
});

<div id="timer"> 
  <span class="minutes">00</span> 
  <span class="seconds">00</span> 
</div> 
 
<div> 
  <button id="start">Start</button> 
  <button id="stop">Stop</button> 
  <button id="reset">Reset</button> 
</div>

upd: добавил кнопку reset