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>