Skip to main content
se añadieron 508 caracteres en el cuerpo
Origen Enlace
Alan
  • 410
  • 2
  • 10

    <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.

<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>
<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>
<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) {

            //final
            form.second.value = 0;
            form.minute.value = 0;
            form.hour.value = 0;
        } else {
            setTimeout(countDown, 1000);
        }
    }
</script>

    <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.

<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>
Origen Enlace
Alan
  • 410
  • 2
  • 10

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>

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) {

            //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.