Control de tiempo usando setInterval() – practica Cronometro en JavaScript

Bienvenidos a otra publicación estimados lectores. Esta ocasión veremos la función setInterval, que nos sirve para realizar control de tiempo en javascript. Esto quiere decir, ejecutar una pieza de codigo cada determinado tiempo, de manera que podemos aprovecharlo para hacer una aplicación tan sencilla como un cronometro para comprender mejor su funcionamiento.

Implementación de setInterval()

setInterval es una función del objeto window, y consta de 2 parametros principalmente, su uso mas basico el el siguiente, donde el primer parametro describe una funcion anonima que contiene el codigo a ejecutar cada cierto tiempo, y el segundo parametro es el tiempo en milisegundos que separa cada intervalo de ejecución.

//Forma 1
setInterval(function(){/* codigo a ejecutar*/}, time);
/*donde time es el tiempo en milisegundos*/

//Forma 2 (usando window)
window.setInterval(function(){/* codigo a ejecutar*/}, time);

Para destruir el intervalo de tiempo basta con usar la funcion clearInterval() el usarla sin especificar parametros detendra el funcionamiento de los procesos que actualmente se esten ejecutando por medio de una funcion de setInterval.

En el siguiente ejemplo veremos como hacer un cronometro en el que usamos esta función para contar minutos y segundos, y que podemos detenerla usando un identificador en la funcion de setInterval y clearInterval. Solo es necesario copiar y pegar en un archivo html.

Codigo fuente ejemplo de cronometro de minutos y segundos

<!DOCTYE html>
<html>
<head>
	<script type="text/javascript">
	//setInterval
	var cronometro;

	function detenerse()
	{
		clearInterval(cronometro);
	}

	function carga()
	{
		contador_s =0;
		contador_m =0;
		s = document.getElementById("segundos");
		m = document.getElementById("minutos");

		cronometro = setInterval(
			function(){
				if(contador_s==60)
				{
					contador_s=0;
					contador_m++;
					m.innerHTML = contador_m;

					if(contador_m==60)
					{
						contador_m=0;
					}
				}

				s.innerHTML = contador_s;
				contador_s++;

			}
			,1000);

	}

	</script>
</head>
<body onload="carga()">
	<p>
		<span id="minutos">0</span>:<span id="segundos">0</span>
	</p>
	<input type="button" onclick="detenerse()" value="deternse"/>
</body>
</html>



Acerca del autor:

Mi nombre es Jorge Villalobos, soy Colombiano de nacimiento y resido en México desde 2005,actualmente soy el creador de codigoprogramacion.com Soy ingeniero en tecnologías de información y comunicaciones y trabajo de tiempo completo desarrollando aplicaciones web. En general me considero un tipo normal, me gusta salir, divertirme, y uno de mis hobbies es programar y hacer tutoriales para compartir conocimiento, me gusta la pizza, el ajedrez y tomar una que otra cerveza los fines de semana. Espero que este proyecto ayude a ayudar a los demás.

Twitter del autor:

4 comments

  1. brian says:

    hola que tal amigo muy útiles tus tutoriales..

    tengo una duda como podría hacar para que esto funcionara en cuenta regresiva de 30 minutos y cuando llegue a diga una frase como tiempo finalizado ?

  2. pablo says:

    como puedo adaptar estos códigos. Para que el cronometro se inicie a una hora determinada.
    Por ejemplo. Quiero que se inicie el cronometro cuando empice un juego de fútbol. para que la persona que ingrese a mi web sepa cuantos minutos van de juego.

  3. sol says:

    tengo formulario y quiero limitar tiempo para responder y cuando termina el tiempo las q no contesto se pongan como incorrectas como hago????

  4. Hola como estas? :).. oye tu podrias ayudarme, es para un trabajo de mi U. pero estoy corchadisima, soy de Colombia, debo hacer un formulario sencillo de inscripción, y que la persona entre y se inscriba pero que halla un contador para ver cuanto dura esa persona inscribiendose, y al final toda la informacion incluida el conteo sea almacenada en una base de datos,…

    Para ti es sobrado.. ayudame por fa! yo puedo enviarte un agradecimiento por Payopal si asi lo quieres! … please :)

Leave a Reply

Your email address will not be published. Required fields are marked *