Saltar al contenido

Cómo crear un reloj / temporizador JQuery

Después de observar en diferentes repositorios y páginas de internet al terminar descubrimos la resolución que te enseñaremos a continuación.

Solución:

estas buscando el setInterval función, que ejecuta una función cada X milisegundos.

Por ejemplo:

var start = new Date;

setInterval(function() 
    $('.Timer').text((new Date - start) / 1000 + " Seconds");
, 1000);

setInterval como lo sugirió SLaks era exactamente lo que necesitaba para hacer mi temporizador. (¡Gracias amigo!)

Usando setInterval y esta excelente publicación de blog, terminé creando la siguiente función para mostrar un temporizador dentro de mi div “box_header”. ¡Espero que esto ayude a cualquier otra persona con requisitos similares!

 function get_elapsed_time_string(total_seconds) 
  function pretty_time_string(num) 
    return ( num < 10 ? "0" : "" ) + num;
  

  var hours = Math.floor(total_seconds / 3600);
  total_seconds = total_seconds % 3600;

  var minutes = Math.floor(total_seconds / 60);
  total_seconds = total_seconds % 60;

  var seconds = Math.floor(total_seconds);

  // Pad the minutes and seconds with leading zeros, if required
  hours = pretty_time_string(hours);
  minutes = pretty_time_string(minutes);
  seconds = pretty_time_string(seconds);

  // Compose the string for display
  var currentTimeString = hours + ":" + minutes + ":" + seconds;

  return currentTimeString;


var elapsed_seconds = 0;
setInterval(function() 
  elapsed_seconds = elapsed_seconds + 1;
  $('#box_header').text(get_elapsed_time_string(elapsed_seconds));
, 1000);

################## JQuery (use API) #################   
 $(document).ready(function()
         function getdate()
                var today = new Date();
            var h = today.getHours();
            var m = today.getMinutes();
            var s = today.getSeconds();
             if(s<10)
                 s = "0"+s;
             
             if (m < 10) 
                m = "0" + m;
            
            $("h1").text(h+" : "+m+" : "+s);
             setTimeout(function()getdate(), 500);
            

        $("button").click(getdate);
    );

################## HTML ###################

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *