Parar função quando acabar contagem regressiva

Front-end JavaScript
, , , ,
#1

Bom pessoal,fiz uma função javascript de contagem regressiva de uma hora.A lógica está funcionando, porém quero parar esta função quando chegar em 00:00:00.E toda vez que ela terminasse eu pudesse chamar ela de novo na minha pagina web.Como posso fazer isso?

<script type="text/javascript">
            var segundo = "6" + 0;
            var minuto = "5" + 9;
            var hora = "0" + 0;

            function tempo() {
                if (segundo > 0) {
                    segundo--
                    if (segundo < 10) {
                        segundo = "0" + segundo
                    }

                }
                if (segundo == 0 && minuto <= 60) {
                    segundo = 59;
                    minuto--;
                    if (minuto < 10) {
                        minuto = "0" + minuto;
                    }
                }

                if (segundo == 0 && minuto == 1) {
                    minuto = "0" + minuto;
                    segundo = 59;
                }            
                form.cronometro.value = hora + ":" + minuto + ":" + segundo
            }
        </script>
    </head>
    <body>
        <form name="form">
            <input type="text" name="cronometro" value="01:00:00" readonly="true" />
            <br />
            <button type="button" onclick="setInterval('tempo()', 1000);
                    return false;">Iniciar Cronômetro</button>
        </form>
    </body>
#2

Para limpar o setInterval, você precisa armazena-lo em uma variável. Depois fazer uma verificação para quando chegar em zero.

Dei uma modificada, a função não está mais direto no html, mas sim sendo para por EventListener.
E o valor padrão está vindo do value inserido no input.

Espero ter ajudado!

Abs!

<!DOCTYPE html>
<html lang="pt-br">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<form name="form">
		<input type="text" name="cronometro" value="20:00:04" readonly="true" />
		<br />
		<button type="button">Iniciar cronômetro</button>
	</form>

	<script>
		var split = form.cronometro.value.split(':');
		var addZero, clearInt;
		var numCount = split.map(function (el) {
			return parseInt(el);
		});

		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(function (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(function (el, i) {
		  	return 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);
		  }
		}
	</script>
</body>
</html>

jsFiddle

#3

Valeu xará deu certo! Era isso mesmo que estava tentando fazer!