Saltar al contenido

¿Cómo crear un cronómetro usando JavaScript?

Por fin luego de tanto batallar ya encontramos la solución de este atasco que ciertos los usuarios de este sitio han tenido. Si tienes algo más que compartir no dudes en aportar tu conocimiento.

Solución:

demostración jsbin.com

Verá que el código de demostración es solo un contador de milisegundos de inicio/detención/reinicio. Si desea hacer un formato de fantasía en el tiempo, eso depende completamente de usted. Esto debería ser más que suficiente para empezar.

Este fue un pequeño proyecto divertido en el que trabajar. Así es como lo abordaría

var Stopwatch = function(elem, options) 

  var timer       = createTimer(),
      startButton = createButton("start", start),
      stopButton  = createButton("stop", stop),
      resetButton = createButton("reset", reset),
      offset,
      clock,
      interval;

  // default options
  options = options ;

Obtenga algunos envoltorios HTML básicos para ello

El uso es muy simple a partir de ahí. 

var elems = document.getElementsByClassName("stopwatch");

for (var i=0, len=elems.length; i

Como beneficio adicional, también obtiene una API programable para los temporizadores. Aquí hay un ejemplo de uso

var elem = document.getElementById("my-stopwatch");
var timer = new Stopwatch(elem, delay: 10);

// start the timer
timer.start();

// stop the timer
timer.stop();

// reset the timer
timer.reset();

Complemento jQuery

En cuanto a la parte de jQuery, una vez que tenga una buena composición de código como la anterior, escribir un complemento de jQuery es un modo fácil

(function($) 

  var Stopwatch = function(elem, options) 
    // code from above...
  ;

  $.fn.stopwatch = function(options) 
    return this.each(function(idx, elem) 
      new Stopwatch(elem, options);
    );
  ;
)(jQuery);

Uso del complemento jQuery

// all elements with class .stopwatch; default delay (1 ms)
$(".stopwatch").stopwatch();

// a specific element with id #my-stopwatch; custom delay (10 ms)
$("#my-stopwatch").stopwatch(delay: 10);

Dos soluciones nativas

  • performance.now --> Llamar a... tomó 6.414999981643632 milisegundos.
  • console.time --> Llamar a... tomó 5.815 milisegundos

La diferencia entre ambos es la precisión.

Para uso y explicación sigue leyendo.

Performance.now (Para uso con precisión de microsegundos)

    var t0 = performance.now();
    doSomething();
    var t1 = performance.now();

    console.log("Call to doSomething took " + (t1 - t0) + " milliseconds.");
            
    function doSomething()    
       for(i=0;i<1000000;i++)var x = i*i;

rendimiento.ahora

A diferencia de otros datos de tiempo disponibles para JavaScript (por ejemplo, Date.now), las marcas de tiempo devueltas por Performance.now() no están limitadas a una resolución de un milisegundo. En su lugar, representan tiempos como números de punto flotante con una precisión de microsegundos.

Además, a diferencia de Date.now(), los valores devueltos por Performance.now() siempre aumentan a un ritmo constante, independientemente del reloj del sistema (que puede ajustarse manualmente o desviarse mediante un software como NTP). De lo contrario, performance.timing.navigationStart + performance.now() será aproximadamente igual a Date.now().

console.time

Ejemplo: (timeEnd envuelto en setTimeout para simulación)

console.time('Search page');
  doSomething();
console.timeEnd('Search page');
 

 function doSomething()    
       for(i=0;i<1000000;i++)var x = i*i;

Puede cambiar el nombre del temporizador para diferentes operaciones.

Un reloj sencillo y fácil para ti y no me olvides 😉

var x;
var startstop = 0;

function startStop()  /* Toggle StartStop */

  startstop = startstop + 1;

  if (startstop === 1) 
    start();
    document.getElementById("start").innerHTML = "Stop";
   else if (startstop === 2) 
    document.getElementById("start").innerHTML = "Start";
    startstop = 0;
    stop();
  




function start() 
  x = setInterval(timer, 10);
 /* Start */

function stop() 
  clearInterval(x);
 /* Stop */

var milisec = 0;
var sec = 0; /* holds incrementing value */
var min = 0;
var hour = 0;

/* Contains and outputs returned value of  function checkTime */

var miliSecOut = 0;
var secOut = 0;
var minOut = 0;
var hourOut = 0;

/* Output variable End */


function timer() 
  /* Main Timer */


  miliSecOut = checkTime(milisec);
  secOut = checkTime(sec);
  minOut = checkTime(min);
  hourOut = checkTime(hour);

  milisec = ++milisec;

  if (milisec === 100) 
    milisec = 0;
    sec = ++sec;
  

  if (sec == 60) 
    min = ++min;
    sec = 0;
  

  if (min == 60) 
    min = 0;
    hour = ++hour;

  


  document.getElementById("milisec").innerHTML = miliSecOut;
  document.getElementById("sec").innerHTML = secOut;
  document.getElementById("min").innerHTML = minOut;
  document.getElementById("hour").innerHTML = hourOut;




/* Adds 0 when value is <10 */


function checkTime(i) 
  if (i < 10) 
    i = "0" + i;
  
  return i;


function reset() 


  /*Reset*/

  milisec = 0;
  sec = 0;
  min = 0
  hour = 0;

  document.getElementById("milisec").innerHTML = "00";
  document.getElementById("sec").innerHTML = "00";
  document.getElementById("min").innerHTML = "00";
  document.getElementById("hour").innerHTML = "00";



  00 :
  00 :
  00 :
  00

Calificaciones y reseñas

Agradecemos que desees añadir valor a nuestra información tributando tu experiencia en las aclaraciones.

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

Tags : / /

Utiliza Nuestro Buscador

Preguntas Relacionadas:

Deja una respuesta

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