Cronómetro con botonera en JavaScript fácil y rápido

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

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>