jueves, 28 de agosto de 2014

Tutorial Javascript parte 14 - setTimeout-clearTimeout reloj de ejemplo




En esta parte del tutorial veremos como crear temporizadores a través del método setTimeout, como ejemplo crearemos un reloj.

El método setTimeout() llama a una función o evalúa una expresión despues de un especificado número de milisegundos.

El método clearTimeout() permite detener la acción del método setTimeout().

Código del ejemplo del capítulo:


<!DOCTYPE HTML>
<html>
<head>
<script>

temporizador = setTimeout("reloj()", 1000);

function reloj()
   {
     var tiempo = new Date();
	 var hours = tiempo.getHours();
	 var minutes = tiempo.getMinutes();
	 var seconds = tiempo.getSeconds();
	 document.getElementById("hours").innerHTML = hours;
	 document.getElementById("minutes").innerHTML = minutes;
	 document.getElementById("seconds").innerHTML = seconds;
	 
	 temporizador = setTimeout("reloj()", 1000);
	 
	 var str_hours = new String(hours);
	 if (str_hours.length == 1)
	    {
		 document.getElementById("hours").innerHTML = "0" + str_hours;
		}
		
	 var str_minutes = new String(minutes);
	 if (str_minutes.length == 1)
	    {
		 document.getElementById("minutes").innerHTML = "0" + str_minutes;
		}
		
	 var str_seconds = new String(seconds);
	 if (str_seconds.length == 1)
	    {
		 document.getElementById("seconds").innerHTML = "0" + str_seconds;
		}
   }
   
function stop()
   {
     clearTimeout(temporizador);
   }   
   
function play()
   {
     temporizador = setTimeout("reloj()", 1000);
   }
   
</script>
</head>
<body>
<span id="hours"></span> : <span id="minutes"></span> : <span id="seconds"></span>

<button type="button" onclick="stop()">Detener hora</button>
<button type="button" onclick="play()">Empezar de nuevo</button>
</body>
</html>