Un reloj/cronómetro digital con Javascript
Solución
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
background-color: #f0f0f0;
flex-direction: column;
}
#timer {
font-size: 3em;
color: #333;
margin-bottom: 20px;
}
button {
font-size: 1em;
padding: 10px 20px;
margin: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="timer">00:00:00</div>
<div>
<button id="countUp">Incrementar</button>
<button id="countDown">Decrementar</button>
<button id="pause">Pausar</button>
<button id="reset">Reiniciar</button>
</div>
</body>
<script>
class Timer {
constructor(sense=0) {
this.hours = 0;
this.minutes = 0;
this.seconds = 0;
this.interval = null;
this.sense = null; //0,1 ascendente, -1 descedente
this.timerElement = document.getElementById('timer');
}
//Actualiza valores de contador
updateTime(){
this.seconds += this.sense;
this.seconds = this.seconds % 60;
if (this.seconds === 0){
this.minutes += this.sense
this.minutes = this.minutes % 60;
if ( this.minutes == 0){
this.hours++
}
}
if( this.seconds <= 0 && this.minutes <= 0 && this.hours <= 0){
this.reset();
}else{
this.updateDisplay();
}
}
// Reiniciar el contador
reset() {
this.set(0,0,0);
this.stop();
}
//Poner un tiempo inicial
set(hours, minutes, seconds) {
this.hours = hours ;
this.minutes = minutes >59 ? 0 : Math.abs(minutes%60);
this.seconds = seconds > 59 ? 0: Math.abs(seconds%60);
this.updateDisplay();
}
// Método para actualizar la visualización del tiempo
updateDisplay() {
const formattedHours = String(this.hours).padStart(2, '0');
const formattedMinutes = String(this.minutes).padStart(2, '0');
const formattedSeconds = String(this.seconds).padStart(2, '0');
this.timerElement.textContent = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}
//
start(sense){
if (this.interval) return;
this.sense = sense>=0?1:-1; //1 ascendente, -1 descedente
this.interval = setInterval(() => this.updateTime(), 1000);
}
// Método para detener el contador
stop() {
clearInterval(this.interval);
this.sense = null;
this.interval = null;
}
// Método para poner en pausa el contador
toggle() {
if (!this.sense){
return;
}
if(this.interval){
clearInterval(this.interval);
this.interval = null;
}else{
this.interval = setInterval(() => this.updateTime(), 1000);
}
}
}
// Instanciar el Timer
const timer = new Timer(1);
// Event listeners para los botones
document.getElementById('countUp').addEventListener('click', () => {
timer.stop(); // Detener cualquier intervalo previo
timer.start(1);
document.getElementById('pause').innerText = "Pausar"
});
document.getElementById('countDown').addEventListener('click', () => {
timer.stop(); // Detener cualquier intervalo previo
timer.start(-1);
document.getElementById('pause').innerText = "Pausar"
});
document.getElementById('pause').addEventListener('click', () => {
if(timer.interval){
event.target.innerText = "Seguir "
}else{
event.target.innerText = "Pausar"
}
timer.toggle();
});
document.getElementById('reset').addEventListener('click', () => {
timer.stop();
timer.reset();
});
</script>
Explicación
Bien este widget para tu p´çagina web te permite colocar un reloj digital para usarlo como cronómetro, por ejemplo en un juego.
Es una base para desarrollos más complejos, o puedes integrarlo directamente en tu página.
El código HTML es bien simple: colo necesitas un bloque con el atributo id=timer En el ejemplo además van botones para iniciar el cronómetro, pausarlo y resetearlo.
Los estilos CSS son también muy simples, en este ejmeplo los estilos de bosy son solo para la presentación en la págna de prueba. El timer y los botones no llevan efectos especiales, eso lo puedes modificar para personalizarlo.
Él código Javascript, esta es la parte más complicada del ejmeplo. El funamento es el uso de clearInterval() la función javascript que permite lanzar un proceso (una función callback) a intervalos regulares, en este caso el procesa se ejecuta cada segundo, y la función que se ejecuta se encarga de actualziar los valores mostrados en el contador.
Ya sabes como funciona un reloj, supongo: se van incremetando los segudno y cuando llegan a 60 se incrementan los minutos en una unidad. Cuando los minutos alcanzan el valor 60 pues se incrementa las horas en una unidad.
Cada 60 segundos hacen 1 minuto y cada 60 minutos hacen 1 hora. Eso lo aprendiste en el colegio ¿verdad? Pues aquí lo aplicas como te acabo de explicar.
El temporizador de este ejemplo también puede ir hacia atrás. En este caso los segundos van decrementándose, cuando llegan a 0 se decrementan los minutos. Y cuando los minutos llegan a 0 pues se disminuyen las horas.
¿Como lo hacemos en Javascript? Este algoritmo se puede codificar de varias formas. En este ejemplo implementamos el temporizador como una clase Javascript Timer (ya sabes que las clases de JS son un poco especiales, pero la idea es esa).
Esta clase posee las propiedades y métodos necesarios: almacenar el valor de los contadores de segundos, minutos y horas, el sentido de conteo (contador creciente o decreciente) y el temporizador que lo hace moverse, y los métodos para actualizar los contadores, mostrarlos en pantalla, iniciar, resetear, parar y pausar el reloj.
El método start(sense) se encarga de lanzar setInterval() y poner el sentido de conteo segun indique el argumento sense: 1creciente o -1 decreciente.
Con esto se ejecuta updateTime() cada segundo. El método javascript setInterval devuelve un temporizador que guardamos en la propiedad interval del objeto timer.
El método updateTime incrementa o decrementa el valor de los segundos (propiedad seconds del objeto timer). En cualquier caso cuando los egundos llegan a 0 se modifica el valor de los minutos, igual cuando los minutos llegan a 0. Si van incrementa´dnos llegarán a 0 desde 59 y si van decrementando llegarán a 0 desde 1, para simpllificar el código este conteo se hace con la operacion ce conteo cíclico contador % 60 hace que el contador vaya de 0 a 59, y cuando llega a 59 vuelve a 0. Es muy útil y ahorra bastante códigl.
Cuando tiene actualzido el valor de los contadores seconds/minutes/hours los presenta en la pantalla como una cadena HH:MM:SS usnaod el método updateDisplay()
Para pausar el temporizador mediante el m´çetodo toggle() simplemente ponemos a null el valor de la proiedad interval (creada por setInterval() ), con lo que el proceso se detiene. No se toca ninguna otra propiedad del objeto, de esta manera al volver a pulsar el botón de pausa el contador continua desde donde se paró .
Para detener el temporizador se usa el método stop() que como ves pone a null tanto el temporizador (interval) como el sense. Si reinicias además el contador se resetea con los contadores a 0.
Los botones, repito, son solo para probar el código. Puedes ver que es muy sencillo de colocar en cualqueir página web, solo tienes que personalizarlo para darle el aspecto prefieras, y eso lo haces con el estilo #timer incluso sería fácil modificarlo apra que los números cambién con animaciones o transitions.