JavaScript | Temporizador – Barcelona Geeks

requisitos previos:

En esta publicación, se ha mostrado un temporizador que muestra la cuenta regresiva y su color/mensaje cambia después de cada período de tiempo específico.

Sintaxis:

setTimeout(function, milliseconds, parameter1, ...)

Parámetro: acepta algunos parámetros que se especifican a continuación:

función: Es la función que se ejecutará.
milisegundos: Es la cantidad de milisegundos a esperar antes de ejecutar el código. Es opcional y su valor por defecto es cero (0).
parámetro1: Son parámetros adicionales para pasar a la función y es opcional.

Valor de retorno: Devuelve un número que representa el valor de ID del temporizador que se establece.

Código JavaScript que configura el temporizador de 2 minutos y cuando se agota el tiempo, la alerta de la página «se agota». El método setTimeout() llama a una función o evalúa una expresión después de un número específico de milisegundos.

Código JavaScript para implementar el temporizador:

<html>
  
<head>
    <script>
        //set minutes
        var mins = 2;
  
        //calculate the seconds
        var secs = mins * 60;
  
        //countdown function is evoked when page is loaded
        function countdown() {
            setTimeout('Decrement()', 60);
        }
  
        //Decrement function decrement the value.
        function Decrement() {
            if (document.getElementById) {
                minutes = document.getElementById("minutes");
                seconds = document.getElementById("seconds");
  
                //if less than a minute remaining
                //Display only seconds value.
                if (seconds < 59) {
                    seconds.value = secs;
                }
  
                //Display both minutes and seconds
                //getminutes and getseconds is used to
                //get minutes and seconds
                else {
                    minutes.value = getminutes();
                    seconds.value = getseconds();
                }
                //when less than a minute remaining
                //colour of the minutes and seconds
                //changes to red
                if (mins < 1) {
                    minutes.style.color = "red";
                    seconds.style.color = "red";
                }
                //if seconds becomes zero,
                //then page alert time up
                if (mins < 0) {
                    alert('time up');
                    minutes.value = 0;
                    seconds.value = 0;
                }
                //if seconds > 0 then seconds is decremented
                else {
                    secs--;
                    setTimeout('Decrement()', 1000);
                }
            }
        }
  
        function getminutes() {
            //minutes is seconds divided by 60, rounded down
            mins = Math.floor(secs / 60);
            return mins;
        }
  
        function getseconds() {
            //take minutes remaining (as seconds) away 
            //from total seconds remaining
            return secs - Math.round(mins * 60);
        }
    </script>
</head>
<!-- onload function is evoke when page is load -->
<!--countdown function is called when page is loaded -->
  
<body onload="countdown();">
    <div>
        Time Left ::
        <input id="minutes" type="text" style="width: 10px;
             border: none; font-size: 16px; 
            font-weight: bold; color: black;"><font size="5"> :
                        </font>
        <input id="seconds" type="text" style="width: 20px;
                        border: none; font-size: 16px;
                        font-weight: bold; color: black;">
    </div>
</body>
  
</html>

Salida:
Después de hacer clic en el botón Ejecutar

, después de un tiempo,

cuando queda menos de 1 minuto,

cuando el temporizador está arriba,