Countdown

Countdown until zero.

by Bruno Macedo

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<form name="form">
  <input type="text" name="cronometro" value="20:00:04" readonly="true" />
  <br />
  <button type="button" class="btn btn-warning">Iniciar cronômetro</button>
</form>

CSS

body {
	padding: 2em;
}

JavaScript

var split = form.cronometro.value.split(':')
var numCount = split.map((el) => parseInt(el))
var addZero, clearInt

document.querySelector('button').addEventListener('click', function(e) {
  this.disabled = true
  clearInt = setInterval(countTime, 1000)
})

function countTime() {
  /**
   * Reinicia os minutos e horas
   * Verificando a posição que zerou primeiro
   */
  numCount.map((el, i, array) => {
    if (array[i - 1] > 0 && array[i] == 0 && !array[array.length - 1]) {
      array[i] = 60
      return array[i - 1]--
    }
  })

  /**
   * Decrementa os segundos
   * Verificando se a posição anterior já terminou de contar
   */
  if (numCount[numCount.length - 1] <= 60 && numCount[numCount.length - 1] > 0) {
    numCount[numCount.length - 1]--
  }

  /**
   * Mostra os números no formato de horas 00
   */
  addZero = numCount.map((el, i) => numCount[i] < 10 ? '0' + numCount[i] : numCount[i])
  form.cronometro.value = addZero[0] + ":" + addZero[1] + ":" + addZero[2]

  /**
   * Verifica se o tempo terminou e reativa o botão.
   * Depois limpa o setInterval.
   */
  if (form.cronometro.value == '00:00:00') {
    clearInterval(clearInt)
  }
}