Inicio Novedades Cronómetro con botonera en JavaScript
Javascript

Cronómetro con botonera en JavaScript

por entreunosyceros
Publicado el Última actualización el

El ejercicio que voy a dejar hoy se trata de algo que aprendí a hacer todavía el otro día. El ejemplo era un poco más sencillo (pero más vistoso) que lo que he sacado yo. En aquel ejercicio eran necesarias unas imágenes para los números, pero en este ejemplo que voy a colocar por aquí, ya no son necesarias.

Bueno, quiero aclarar que en aquel ejercicio se mostraba la fecha del sistema, la hora, los minutos y los segundos. Quizás en otro momento suba también aquel ejemplo, pero por el momento me voy a limitar a colocar el código de un cronómetro con botonera parar interactuar con el. Todo realizado con JavaScript. La idea de ello viene dada por que un «compi» hizo algo parecido con aquel ejercicio, así que supongo que por ahí ha llegado todo.

Crónometro con botonera realizada en JavaScript

Explicado el ejercicio, vamos al turrón del asunto …

<html> <head> <meta charset="UTF-8"> <title>Cronómetro</title> <style type="text/css"> * { margin: auto; padding: 0; } h1 { padding: 0.5em; text-align: center; } #cronometro { padding:10px; border: 3px silver solid; width: 200px; text-align: center; } #reloj { padding: 5px 10px; width: 170px; border: 3px solid black; font: bold 1.5em digital, europa, arial; text-align: center; margin: 4px } #cronometro [type=button] { margin: 4px; font: normal 9pt arial } </style> <script type="text/javascript"> window.onload = function() { //localiza en pantalla el reloj y se ronombra visor para trabajar con ello visor=document.getElementById("reloj"); //asociar eventos a botones: al pulsar el botón se activa su función. document.cron.empieza.onclick = empezar; document.cron.para.onclick = parar; document.cron.continua.onclick = continuar; document.cron.reinicia.onclick = reiniciar; } //variables de inicio: var marcha=0; //control del temporizador var cro=0; //estado inicial del cronómetro. //cronometro en marcha. Empezar en 0: function empezar() { if (marcha==0) { //solo si el cronómetro esta parado emp=new Date() //fecha actual elcrono=setInterval(tiempo,10); //función del temporizador. marcha=1 //indicamos que se ha puesto en marcha. } } function tiempo() { //función del temporizador actual=new Date() //fecha en el instante cro=actual-emp //tiempo transcurrido en milisegundos cr=new Date() //fecha donde guardamos el tiempo transcurrido cr.setTime(cro) //nos da la fecha en milisegundos cs=cr.getMilliseconds() //milisegundos del cronómetro cs=cs/10; //paso a centésimas de segundo. cs=Math.round(cs) //despreciamos los decimales sg=cr.getSeconds(); //segundos del cronómetro mn=cr.getMinutes(); //minutos del cronómetro ho=cr.getHours()-1; //horas del cronómetro if (cs<10) {cs="0"+cs;} //se ponen siempre 2 cifras en los números if (sg<10) {sg="0"+sg;} if (mn<10) {mn="0"+mn;} visor.innerHTML=ho+" : "+mn+" : "+sg+" : "+cs; //pasar a pantalla. } //parar el cronómetro function parar() { if (marcha==1) { //sólo si está en funcionamiento clearInterval(elcrono); //parar el crono marcha=0; //indicar que está parado. } } //Continuar una cuenta empezada y parada. function continuar() { if (marcha==0) { //sólo si el crono está parado emp2=new Date(); //fecha actual emp2=emp2.getTime(); //pasar a tiempo Unix emp3=emp2-cro; //restar tiempo anterior emp=new Date(); //nueva fecha inicial para pasar al temporizador emp.setTime(emp3); //datos para nueva fecha inicial. elcrono=setInterval(tiempo,10); //activar temporizador marcha=1; //indicamos que se ha puesto en marcha. } } //Volver al estado inicial function reiniciar() { if (marcha==1) { //si el cronómetro está en marcha: clearInterval(elcrono); //parar el crono marcha=0; //indicar que está parado } cro=0; //tiempo transcurrido a cero visor.innerHTML = "0 : 00 : 00 : 00"; //se escribe en el visor todo a 0 } </script> </head> <body> <h1>CRONÓMETRO con Javascript</h1> <hr> <div id="cronometro"> <div id="reloj">0 : 00 : 00 : 00</div> <!--cornómetro--> <form name="cron" action="#"> <!--botones--> <input type="button" value="Empezar" name="empieza" /> <input type="button" value="Parar" name="para" /><br/> <input type="button" value="Continuar" name="continua" /> <input type="button" value="Reiniciar" name="reinicia" /> </form> <h6>@SapoClay</h6> </div> </body> </html>

 


También te puede interesar ...

Deja tu comentario

* Al utilizar este formulario, acepta que este sitio web almacene y maneje sus datos.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

logo expressVPN - Obtén 30 días gratis

Si te preocupa la seguridad de tus datos, o si quieres saltarte los geobloqueos para ver tus streamings favoritos, consigue una VPN segura y de calidad GRATIS durante 30 días (cancela cuando tú quieras, sin coste alguno). Disponible para todas las plataformas y navegadores.