Cómo crear un cronómetro con JavaScript?

if(stopwatch >= track[song].duration)

track[song].duration encuentra la duración de un soundcloud pista.

Estoy buscando para crear una función de cronómetro, que comienza a contar milisegundos cuando usted haga clic en el swap ID stopwatch de modo que cuando la función ha sido «clic» para una cierta cantidad de tiempo de la función si va a hacer algo. En mi caso, la sustitución de una imagen. Y también que la función se restablece a sí mismo cuando se hace clic de nuevo.

así como stopwatch = current timeclicked time ¿Cómo puedo configurar el clicked time

current time = new Date().getTime(); ? Y es esta en milisegundos?

$('#swap').click(function()...
  • Temporizadores en javascript son generalmente de instalación mediante la creación de objetos de Fecha en momentos particulares. Entonces puede restar las Fechas para obtener la diferencia en milisegundos. Pero parece usted a saber que. Lo que parece faltar es el evento que desea crear objetos de Fecha de de.
InformationsquelleAutor maxisme | 2013-12-02

4 Kommentare

  1. 80

    jsbin.com demo

    Verás el código de demostración es sólo una start/stop/reset contador de milisegundos. Si quieres hacer de fantasía formato en el tiempo, que es totalmente de usted. Esto debería ser más que suficiente para empezar.

    Esto fue un poco de diversión proyecto para trabajar. He aquí cómo me gustaría que el planteamiento

    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 || {};
      options.delay = options.delay || 1;
    
      //append elements     
      elem.appendChild(timer);
      elem.appendChild(startButton);
      elem.appendChild(stopButton);
      elem.appendChild(resetButton);
    
      //initialize
      reset();
    
      //private functions
      function createTimer() {
        return document.createElement("span");
      }
    
      function createButton(action, handler) {
        var a = document.createElement("a");
        a.href = "#" + action;
        a.innerHTML = action;
        a.addEventListener("click", function(event) {
          handler();
          event.preventDefault();
        });
        return a;
      }
    
      function start() {
        if (!interval) {
          offset   = Date.now();
          interval = setInterval(update, options.delay);
        }
      }
    
      function stop() {
        if (interval) {
          clearInterval(interval);
          interval = null;
        }
      }
    
      function reset() {
        clock = 0;
        render();
      }
    
      function update() {
        clock += delta();
        render();
      }
    
      function render() {
        timer.innerHTML = clock/1000; 
      }
    
      function delta() {
        var now = Date.now(),
            d   = now - offset;
    
        offset = now;
        return d;
      }
    
      //public API
      this.start  = start;
      this.stop   = stop;
      this.reset  = reset;
    };

    Obtener básicos de HTML contenedores para que

    <!-- create 3 stopwatches -->
    <div class="stopwatch"></div>
    <div class="stopwatch"></div>
    <div class="stopwatch"></div>

    Uso es muy sencillo desde allí

    var elems = document.getElementsByClassName("stopwatch");
    
    for (var i=0, len=elems.length; i<len; i++) {
      new Stopwatch(elems[i]);
    }

    Como un bono, usted consigue un API programable para los temporizadores así. He aquí 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();

    plugin de jQuery

    Como para el jQuery parte, una vez que usted tiene buenos código de la composición como en el anterior, escribir un plugin de jQuery es fácil modo de

    (function($) {
    
      var Stopwatch = function(elem, options) {
        //code from above...
      };
    
      $.fn.stopwatch = function(options) {
        return this.each(function(idx, elem) {
          new Stopwatch(elem, options);
        });
      };
    })(jQuery);

    plugin de jQuery uso

    //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});
    • En mi caso particular, yo temporizador de llamadas.start() y funciona bien, pero luego cuando tengo que utilizar el temporizador.stop(), el ‘contador’ variable que está pasando fuera de alcance, ¿qué debo hacer?
    • Gracias por su interés. De todos modos, me ha resuelto el problema de unas horas de regreso.
    • Wow, increíble trabajo. Usted se merece un 500 recompensa por ello.
    • Esa es una muy buena pieza de código! Sin embargo, no es uno de gotcha. Si la hora del sistema se cambia mientras el temporizador está activado, el temporizador del valor va a saltar. ¿Cómo podría solucionar este problema?
    • el temporizador también dejará de funcionar si el usuario reinicie su computadora o actualiza la ficha del navegador. Estos no son «trampas». Yo no iba a escribir código para tratar estos «problemas» a menos que haya algún tipo de justificarse extraños requisito.
    • Me estaba preguntando porque yo uso de temporizadores en mi aplicación, y estoy preocupado por este comportamiento. Pensé que, tal vez usted tiene alguna idea de cómo solucionar esto (que podría, por supuesto, ser utilizado por otros ppl demasiado).
    • Sugiero crear una nueva pregunta para su problema específico. Usted tiene más probabilidades de obtener mejores respuestas de esa manera.
    • Gracias, @maček, tal vez voy.
    • Me encantaría ver esta convertida en ES6 el uso de clases nativas y tal. @maček ningún interés?

  2. 8

    Dos nativos de soluciones

    • performance.now –> Llamar al … tomó 6.414999981643632 milisegundos.
    • console.time –> Llamar al … tomó 5.815 milisegundos

    La diferencia entre ambos es de precisión.
    Para el uso y explicación de leer en.


    Performance.now (Por microsegundo de precisión de uso)

    JS:

        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 disponible para JavaScript (por ejemplo
    Fecha.ahora), la hora devuelta por el Rendimiento.ahora() no
    limitado a una resolución de milisegundos. Por el contrario, constituyen veces
    como números de punto flotante con precisión de microsegundos.

    También a diferencia de la Fecha.ahora(), los valores devueltos por el Rendimiento.ahora()
    siempre aumentar a un ritmo constante, independiente de que el reloj del sistema
    (que puede ser ajustado manualmente o sesgada por software como NTP).
    De lo contrario, el rendimiento.temporización.navigationStart + rendimiento.ahora() se
    ser aproximadamente igual a la Fecha.ahora().



    console.time

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

    JS:

    console.time('Search page');
      doSomething();
    console.timeEnd('Search page');
     
    
     function doSomething(){    
           for(i=0;i<1000000;i++){var x = i*i;}
     }

    Puede cambiar el Temporizador de Nombre para las diferentes operaciones.

  3. 1

    Un simple y fácil de reloj para usted y no te olvides de mí 😉

    JS:

    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";
    
    }

    HTML:

    <h1>
      <span id="hour">00</span> :
      <span id="min">00</span> :
      <span id="sec">00</span> :
      <span id="milisec">00</span>
    </h1>
    
    <button onclick="startStop()" id="start">Start</button>
    <button onclick="reset()">Reset</button>

  4. 0

    bien después de un par de modificación del código proporcionado por mace,que terminó la construcción de un cronómetro.
    https://codepen.io/truestbyheart/pen/EGELmv

      <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Stopwatch</title>
        <style>
        #center {
         margin: 30%  30%;
         font-family: tahoma;
         }
        .stopwatch {
             border:1px solid #000;
             background-color: #eee;
             text-align: center;
             width:656px;
             height: 230px;
             overflow: hidden;
         }
         .stopwatch span{
             display: block;
             font-size: 100px;
         }
         .stopwatch p{
             display: inline-block;
             font-size: 40px;
         }
         .stopwatch a{
           font-size:45px;
         }
         a:link,
         a:visited{
             color :#000;
             text-decoration: none;
             padding: 12px 14px;
             border: 1px solid #000;
         }
        </style>
      </head>
      <body>
          <div id="center">
                <div class="timer stopwatch"></div>
          </div>
    
        <script>
          const Stopwatch = function(elem, options) {
            let timer = createTimer(),
              startButton = createButton("start", start),
              stopButton = createButton("stop", stop),
              resetButton = createButton("reset", reset),
              offset,
              clock,
              interval,
              hrs = 0,
              min = 0;
    
            //default options
            options = options || {};
            options.delay = options.delay || 1;
    
            //append elements
            elem.appendChild(timer);
            elem.appendChild(startButton);
            elem.appendChild(stopButton);
            elem.appendChild(resetButton);
    
            //initialize
            reset();
    
            //private functions
            function createTimer() {
              return document.createElement("span");
            }
    
            function createButton(action, handler) {
              if (action !== "reset") {
                let a = document.createElement("a");
                a.href = "#" + action;
                a.innerHTML = action;
                a.addEventListener("click", function(event) {
                  handler();
                  event.preventDefault();
                });
                return a;
              } else if (action === "reset") {
                let a = document.createElement("a");
                a.href = "#" + action;
                a.innerHTML = action;
                a.addEventListener("click", function(event) {
                  clean();
                  event.preventDefault();
                });
                return a;
              }
            }
    
            function start() {
              if (!interval) {
                offset = Date.now();
                interval = setInterval(update, options.delay);
              }
            }
    
            function stop() {
              if (interval) {
                clearInterval(interval);
                interval = null;
              }
            }
    
            function reset() {
              clock = 0;
              render(0);
            }
    
            function clean() {
              min = 0;
              hrs = 0;
              clock = 0;
              render(0);
            }
    
            function update() {
              clock += delta();
              render();
            }
    
            function render() {
              if (Math.floor(clock / 1000) === 60) {
                min++;
                reset();
                if (min === 60) {
                  min = 0;
                  hrs++;
                }
              }
              timer.innerHTML =
                hrs + "<p>hrs</p>" + min + "<p>min</p>" + Math.floor(clock / 1000)+ "<p>sec</p>";
            }
    
            function delta() {
              var now = Date.now(),
                d = now - offset;
    
              offset = now;
              return d;
            }
          };
    
          //Initiating the Stopwatch
          var elems = document.getElementsByClassName("timer");
    
          for (var i = 0, len = elems.length; i < len; i++) {
            new Stopwatch(elems[i]);
          }
        </script>
      </body>
    </html>

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea