Haz click para parar e iniciar el reloj.
Mi idea original era utilizar el siguiente código, con dos eventos click
sobre el mismo elemento.:
var cl, intervalId; function mostrarFecha(){ var date = new Date(); cl.innerHTML = date.getHours() + ' horas, ' + date.getMinutes() + ' minutos, ' + date.getSeconds() + ' segundos, ' + date.getMilliseconds() + ' ms'; } function startWatch(){ intervalId = setInterval(mostrarFecha, 1); } function stopWatch(){ clearInterval(intervalId); } function init(){ cl = document.getElementById('fecha'); startWatch(); cl.addEventListener('click', stopWatch); cl.addEventListener('click', startWatch); }
El problema que me encontré fue el hecho de que al hacer click sobre la hora se ejecutaban los dos eventos (parada y arranque) de forma consecutiva, por lo que el reloj no se paraba. Pensé en utilizar cl.addEventListener('dblclick', startWatch);
en su lugar para diferenciar los eventos, pero el enunciado del ejercicio pedía un único click para la puesta en marcha del reloj.
Es por ello que el código final que entrego incluye las llamadas a removeEventListener
para eliminar el evento anterior antes de crear un nuevo evento. Con esto consigo que un único click sirva para iniciar y detener el reloj.
var cl, intervalId; function mostrarFecha(){ var date = new Date(); cl.innerHTML = date.getHours() + ' horas, ' + date.getMinutes() + ' minutos, ' + date.getSeconds() + ' segundos, ' + date.getMilliseconds() + ' ms'; } function startWatch(){ intervalId = setInterval(mostrarFecha, 1); cl.removeEventListener('click', startWatch); cl.addEventListener('click', stopWatch); } function stopWatch(){ clearInterval(intervalId); cl.removeEventListener('click', stopWatch); cl.addEventListener('click', startWatch); } function init(){ cl = document.getElementById('fecha'); startWatch(); }