Un cronómetro de JavaScript puro minimalista

Vista prévia

Descripción

Un simple cronómetro de JavaScript ligero que te permite contar desde cero con los controles de inicio, pausa, reanudación y detención. Creado por < a href = "https://codepen.io/cathydutton" target = "_ blank" rel = "noopener" > cathydutton .

Uso básico

Crea el HTML para un cronómetro.

<p><span id="seconds">00</span>:<span id="tens">00</span></p>

Crea algunos controles para el cronómetro.

<button id="button-start">Start</button>
<button id="button-stop">Stop</button>
<button id="button-reset">Reset</button>

El JavaScript para activar el cronómetro.

window.onload = function () {



var seconds = 00;

 var tens = 00;

 var appendTens = document.getElementById("tens")

var appendSeconds = document.getElementById("seconds")

var buttonStart = document.getElementById('button-start');

var buttonStop = document.getElementById('button-stop');

var buttonReset = document.getElementById('button-reset');

var Interval ;


buttonStart.onclick = function() {





 clearInterval(Interval);


 Interval = setInterval(startTimer, 10);

}




buttonStop.onclick = function() {



 clearInterval(Interval);

}




buttonReset.onclick = function() {


 clearInterval(Interval);


tens = "00";

	seconds = "00";


appendTens.innerHTML = tens;

	appendSeconds.innerHTML = seconds;

}







 function startTimer () {


tens++;





 if(tens < 9){



appendTens.innerHTML = "0" + tens;


}





if (tens > 9){



appendTens.innerHTML = tens;






}





 if (tens > 99) {



console.log("seconds");



seconds++;



appendSeconds.innerHTML = "0" + seconds;



tens = 0;



appendTens.innerHTML = "0" + 0;


}





if (seconds > 9){



appendSeconds.innerHTML = seconds;


}



}



}