Quiero agregar un temporizador a la página donde comienza en la carga de la página.
Donde sube en milisegundos.
Luego se detiene cuando se hace clic con el mouse en el botón.
¿Cómo crearía un ejemplo de código de eso?
Eso es todo lo que estoy tratando de hacer en el código.
Agregue un temporizador que se inicia en la carga de la página.
Sube en milisegundos.
Luego se detiene cuando se hace clic en el botón.
Quiero ser capaz de ver los números subiendo.
https://jsfiddle.net/xvkwmndq/
// Counter var enterDate = new Date(); function secondsSinceEnter() { return (new Date() - enterDate) / 1000; } // Usage example document.querySelector('button').onclick = function() { var sec = secondsSinceEnter(); if (sec < 10) this.innerText = sec + " seconds"; else this.innerText = 'You are here like for eternity'; }; .play { -webkit-appearance: none; appearance: none; position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto; display: flex; justify-content: center; align-items: center; width: 90px; height: 90px; border-radius: 50%; cursor: pointer; border: 9px solid blue; background: transparent; filter: drop-shadow(3px 3px 3px #000000b3); } <button class="play" type="button" aria-label="Open"></button>Relacionado con el jsfiddle en tu comentario:
No use this para acceder al botón. En su lugar, simplemente use document.querySelector :
document.querySelector('button').onclick = function() { var sec = secondsSinceEnter(); if (sec < 10) document.querySelector('button').innerText = sec + " seconds"; else document.querySelector('button').innerText = 'You are here like for eternity'; } Luego, solo está agregando la hora en que se hace clic en el botón. Además, debe llamarlo cada 0 ms (cada 'tic') usando setInterval . Para que no tenga que escribir la función dos veces, puede definirla como una función separada. Finalmente, elimine el intervalo cuando se hace clic en el botón.
Guión completo:
// Interval var interval; // Counter var enterDate = new Date(); function secondsSinceEnter() { return (new Date() - enterDate) / 1000; } // Event function function evtFct() { var sec = secondsSinceEnter().toFixed(3); if (sec < 10) document.querySelector('button').innerText = sec + " seconds"; else document.querySelector('button').innerText = 'You are here like for eternity'; } // Add interval to keep the current time uptodate interval = setInterval(evtFct, 0); // Call evtFct every tick // Usage example document.querySelector('button').onclick = function() { evtFct(); clearInterval(interval); // Disable interval }