Untitled

<!DOCTYPE html>
<html lang="es">
<head>
	<title>Cronometro</title>
	<link rel="icon" type="image/png" href="https://lh3.googleusercontent.com/Q-TyP-0iMexxAQDt7N81PLjLCrkoBkZVuSxP_1laOHxmctHhwJKsOXC9DYeBGXs8NIM=s180" sizes="64x64">
	<meta charset="utf-8">
	<style>
	.cronometro{
		width:100%;
		font-size:350%;
		text-align:center;
		margin-top:50px;
	}
	.container{
		border:1px solid black;
		border-radius:50%;
		display:inline-block;
		width:360px;
		height:360px;
		vertical-align:middle;
	}
	.container span{
		top:40%;
		position:relative;
	}
	.iniciar{
		color:#7c9ed3;
		cursor:pointer;
	}
	.iniciar:hover{
		color:#516687;
	}
	table{
		margin:auto;
		text-align:center;
	}
	table tr td input{
		margin:2em;
		padding:1em 3em;
		background-color:rgba(134, 147, 168,0.5);
	}
	table tr td input:focus{
		outline-width:0px;
	}
	</style>
	<script>
	function values(){
		var horas=document.getElementById("horas");
		var minutos=document.getElementById("minutos");
		var segundos=document.getElementById("segundos");
		var milisegundos=document.getElementById("milisegundos");
		var btnprincipal=document.getElementById("btnprincipal");
	}
	function reset(){
		horas.innerHTML="00";
		minutos.innerHTML="00";
		segundos.innerHTML="00";
		milisegundos.innerHTML="00";
	}
	function numero(num){
		//Cuando ya has iniciado el cronometro y lo has pausado
		if(milisegundos.innerHTML=="00"){
			//Cuando las horas estan en 00
			if(horas.innerHTML=="00"){
				//Cuando los minutos estan en 00
				if(minutos.innerHTML=="00"){
					//Cuando los segundos estan en 00
					if(segundos.innerHTML=="00"){
						segundos.innerHTML="0"+num;
					}
					//Cuando los segundos tienen las decimas en 0
					else{
						//Cuando es la 1º vez que pasa por aqui
						if(segundos.innerHTML.substr(0,1)=="0"){
							segundos.innerHTML=segundos.innerHTML.substr(1)+num;
						}
						//Cuando es la 2º vez que pasa por aqui
						else{
							minutos.innerHTML="0"+segundos.innerHTML.substr(0,1);
							segundos.innerHTML=segundos.innerHTML.substr(1)+num;
						}
					}
				}
				//Cuando las decimas de los minutos estan en 0
				else{
					if(minutos.innerHTML.substr(0,1)=="0"){
						minutos.innerHTML=minutos.innerHTML.substr(1)+segundos.innerHTML.substr(0,1);
						segundos.innerHTML=segundos.innerHTML.substr(1)+num;
					}
					else{
						horas.innerHTML="0"+minutos.innerHTML.substr(0,1);
						minutos.innerHTML=minutos.innerHTML.substr(1)+segundos.innerHTML.substr(0,1);
						segundos.innerHTML=segundos.innerHTML.substr(1)+num;
					}
				}
			}
			else{
				if(horas.innerHTML.substr(0,1)=="0"){
					if(horas.innerHTML.substr(1)>2){
						if(minutos.innerHTML.substr(0,1)>4){
							horas.innerHTML="2"+"4";
							minutos.innerHTML=minutos.innerHTML.substr(1)+segundos.innerHTML.substr(0,1);
							segundos.innerHTML=segundos.innerHTML.substr(1)+num;
						}
						else{
							horas.innerHTML="2"+minutos.innerHTML.substr(0,1);
							minutos.innerHTML=minutos.innerHTML.substr(1)+segundos.innerHTML.substr(0,1);
							segundos.innerHTML=segundos.innerHTML.substr(1)+num;
						}
					}
					else{
						if(horas.innerHTML.substr(1)==1){
							horas.innerHTML=horas.innerHTML.substr(1)+minutos.innerHTML.substr(0,1);
							minutos.innerHTML=minutos.innerHTML.substr(1)+segundos.innerHTML.substr(0,1);
							segundos.innerHTML=segundos.innerHTML.substr(1)+num;
						}
						else{
							if(minutos.innerHTML.substr(0,1)>4){
								horas.innerHTML=horas.innerHTML.substr(1)+"4";
								minutos.innerHTML=minutos.innerHTML.substr(1)+segundos.innerHTML.substr(0,1);
								segundos.innerHTML=segundos.innerHTML.substr(1)+num;
							}
							else{
								horas.innerHTML=horas.innerHTML.substr(1)+minutos.innerHTML.substr(0,1);
								minutos.innerHTML=minutos.innerHTML.substr(1)+segundos.innerHTML.substr(0,1);
								segundos.innerHTML=segundos.innerHTML.substr(1)+num;
							}
						}
					}
				}
			}
		}
		else{
			pausar();
			reset();
			numero(num);
		}
	}
	function del(){
		segundos.innerHTML=minutos.innerHTML.substr(1)+segundos.innerHTML.substr(0,1);
		minutos.innerHTML=horas.innerHTML.substr(1)+minutos.innerHTML.substr(0,1);
		horas.innerHTML="0"+horas.innerHTML.substr(0,1);
	}
	function iniciar(){
		btnprincipal.setAttribute("onclick","pausar();");
		btnprincipal.innerHTML="Pausar";
	}
	function pausar(){
		btnprincipal.setAttribute("onclick","iniciar();");
		btnprincipal.innerHTML="Iniciar";
	}
	</script>
</head>
<body onload="values();reset();">
<div class="cronometro">
	<div class="container">
		<span id="horas"></span>
		<span>:</span>
		<span id="minutos"></span>
		<span>:</span>
		<span id="segundos"></span>
		<span>:</span>
		<span id="milisegundos"></span>
		<br />
		<span id="btnprincipal" class="iniciar" onclick="iniciar();">Iniciar</span>
	</div>
</div>
<table>
	<tr>
		<td><input type="button" onclick="numero(7);" value="7" /></td>
		<td><input type="button" onclick="numero(8);" value="8" /></td>
		<td><input type="button" onclick="numero(9);" value="9" /></td>
	</tr>
	<tr>
		<td><input type="button" onclick="numero(4);" value="4" /></td>
		<td><input type="button" onclick="numero(5);" value="5" /></td>
		<td><input type="button" onclick="numero(6);" value="6" /></td>
	</tr>
	<tr>
		<td><input type="button" onclick="numero(1);" value="1"></td>
		<td><input type="button" onclick="numero(2);" value="2"></td>
		<td><input type="button" onclick="numero(3);" value="3"></td>
	</tr>
	<tr>
		<td><input type="button" onclick="reset();" value="RESET"></td>
		<td><input type="button" onclick="numero(0);" value="0"></td>
		<td><input type="button" onclick="del()" value="DEL"></td>
	</tr>
</table>
</body>
</html>