0

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.

1

1 respuesta 1

0

Te dejo un código que creo soluciona lo que pides, basándome en el que dejas sería de la siguiente forma:

Formulario:


    <form name="form" class="clok">
            <div>
                <span>
                    <input type="number" size="2" class="form_input" name="hour" id="hour"></span>
                <div class="smalltext">Horas</div>
            </div>
            <hr>
            <div>
                <span>
                    <input type="number" size="2" class="form_input" name="minute" id="minute"></span>
                <div class="smalltext">Minutos</div>
            </div>
            <hr>
            <div>
                <span>
                    <input type="number" size="2" class="form_input" id="second" name="second"></span>
                <div class="smalltext">Sec</div>
            </div>
            <hr>
        </form>

        <button onclick="countDown()">empezar</button>
    <br>
        <audio id="audio" controls> <!-- Puedes ocultarlo con CSS -->
            <source type="audio/wav" src="Notificacion.wav">
        </audio>

NOTA: Recuerda que debes de tener el archivo de audio en un lugar alcanzable para poner en el src del source.

JS

<script>
    function countDown() {

        var toHour = document.getElementById("hour").value;
        var toMinute = document.getElementById("minute").value;
        var toSecond = document.getElementById("second").value;

        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) {
            //Reproducir audio al final del conteo
            var audio = document.getElementById("audio");
            audio.play();
            //final
            form.second.value = 0;
            form.minute.value = 0;
            form.hour.value = 0;
        } else {
            setTimeout(countDown, 1000);
        }
    }
</script>

Y finalmente te comento que lo que cambie únicamente fue que obtuve por el ID de cada input los valores, con document.getElementById() para facilitar la ubicación de cada uno de los inputs.

1
  • Muchas Gracias es tal como tenía planeado, muchas gracias Commented el 25 may. 2020 a las 1:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.