Aquí le dejó el código en HTML. Aquí está la vista de como sería el cronómetro, como lo input que tiene, me confundo al momento de llamarlo, no sé si por el ID o por el NAME.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Cuenta atrás</h1>
<form name="form" class="clok">
<div><span id="days">
<input type="number" size="2" class="form_input" value="0" name="hour" ></span><div class="smalltext">Horas</div></div>
<div><span id="hours">
<input type="number" size="2" class="form_input" name="minute" id="hora"></span><div class="smalltext">Minutos</div></div>
<div><span id="minutes">
<input type="number" size="2" class="form_input" id="second" name="second"></span><div class="smalltext">Sec</div></div>
</form>
<button onclick="countDown()">empezar</button>
<script src="script.js"></script>
</body>
</html>
Aquí le dejó mi código en JS.
var nume = document.querySelector('#hora').value;
toHour = 1;
toMinute = 1;
toSecond = 30;
//cuenta atras
function countDown(){
/*var toHour = document.getElementByName('hour')[0].value;
var toMinute = document.getElementsByName('minute')[0].value;
var toSecond = document.getElementsByName('second')[0].value;
document.write(toHour, "<br>");
document.write(toMinute, "<br>");
document.write(toSecond, "<br>");*/
toSecond=toSecond-1;
if(toSecond<0){
toSecond=59;
toMinute=toMinute-1;
}
form.second.value=toSecond;
if(toMinute<0){
toMinute=59;
toHour=toHour-1;
}
form.minute.value=toMinute;
form.hour.value=toHour;
if(toHour<0){
//final
form.second.value=0;
form.minute.value=0;
form.hour.value=0;
}
else{
setTimeout(countDown,1000);
}
}
//countDown();
Los que está comentado intenté hacerlo pero no pude, será que me puedan apoyar?
El objetivo es que el usuario ponga los minutos y los segundos en el input y cuando apriete el botón empezar, empiece la cuenta regresiva, pero no logro obtener los valores del input para pasarlo a las variables de JS y haga la operaciones, también la idea es agregar un sonido cuando acabe el tiempo.