a/20139418/1636522

HTML

<div id="cronometro">
  <div id="reloj">
	  0 00 00 00
	</div>
  <form name="cron" action="#">
    <input type="button" value="Empezar" name="boton1"   />
    <input type="button" value="Parar" name="boton2"  /><br/>
  </form>
</div>

CSS

@font-face {
    font-family: 'digital_dream';
    src: url('digital_dream/digitaldreamfatskew-webfont.eot');
    src: url('digital_dream/digitaldreamfatskew-webfont.eot?#iefix') format('embedded-opentype'),
         url('digital_dream/digitaldreamfatskew-webfont.woff2') format('woff2'),
         url('digital_dream/digitaldreamfatskew-webfont.woff') format('woff'),
         url('digital_dream/digitaldreamfatskew-webfont.ttf') format('truetype'),
         url('digital_dream/digitaldreamfatskew-webfont.svg#digital_dream_fat_skewregular') format('svg');
    font-weight: normal;
    font-style: normal;
}		
#cronometro { padding:10px; border: 5px #7c7bff double; width: 200px;
              text-align: center; background-color: #007; border-radius: 5px;
							float: right; margin: 1em 3em 1em 3em; }
#reloj { padding: 5px 10px; width: 90% ;border: 1px solid black; 
         font: normal 1em digital_dream, europa, arial; text-align: center; 
         margin: 4px; background-color: #f0ffff; border-radius: 3px;  }
#cronometro [type=button]  { margin: 4px; font: normal 9pt arial; width: 70px; }

JavaScript

var inicio=0;
	var timeout=0;
 
	function empezarDetener(elemento)
window.onload = function() {

visor=document.getElementById("reloj"); //localizar pantalla del reloj
//asociar eventos a botones: al pulsar el botón se activa su función.
document.cron.boton1.onclick = activo; 
document.cron.boton2.onclick = pausa;
document.cron.boton1.disabled=false;
document.cron.boton2.disabled=true;
//variables de inicio:
var marcha=0; //control del temporizador
var cro=0; //estado inicial del cronómetro.

}

//botón Empezar / Reiniciar
function activo (){   
     if (document.cron.boton1.value=="Empezar") { //botón en "Empezar"
        empezar() //ir  la función empezar
        }
     else {  //Botón en "Reiniciar"
        reiniciar()  //ir a la función reiniciar
        }
     }
//botón pausa / continuar
function pausa (){ 
     if (marcha==0) { //con el boton en "continuar"
        continuar() //ir a la función continuar
        }
     else {  //con el botón en "parar"
        parar() //ir a la funcion parar
        }
     }
//Botón 1: Estado empezar: Poner en marcha el crono
function empezar() {
      emp=new Date() //fecha inicial (en el momento de pulsar)
      elcrono=setInterval(tiempo,10); //función del temporizador.
      marcha=1 //indicamos que se ha puesto en marcha.
      document.cron.boton1.value="Reiniciar"; //Cambiar estado del botón
      document.cron.boton2.disabled=false; //activar botón de pausa
      }
//función del temporizador			
function tiempo() { 
     actual=new Date(); //fecha a cada instante
        //tiempo del crono (cro) = fecha instante (actual) - fecha inicial (emp)
     cro=actual-emp; //milisegundos transcurridos.
     cr=new Date(); //pasamos el num. de milisegundos a objeto fecha.
     cr.setTime(cro); 
        //obtener los distintos formatos de la fecha:
     cs=cr.getMilliseconds(); //milisegundos 
     cs=cs/10; //paso a centésimas de segundo.
     cs=Math.round(cs); //redondear las centésimas
     sg=cr.getSeconds(); //segundos 
  ...