Crea tu propia cuenta regresiva con Javascript
Realizamos la explicación de una manera sencilla de realizar una cuenta regresiva con Javascript.
Es muy común ver sitios web que tienen una cuenta regresiva que va desde cierto número de Segundos, Minutos, Horas, Días…etc, o hasta la implementan desde una fecha en específico.
En éste artículo vamos a ver de una manera sencilla como hacer un Script que genere ésta cuenta regresiva, especificando dentro del código la cantidad de tiempo que debe pasar en Segundos. Después lo mejoraremos agregandole un poco más de código para que el Script sea más Dinámico.
El código es éste:
<html>
<head>
<title>Cuenta regresiva - Geekeo</title>
<script language="javascript">
var tiempo = 10;
function cuentaRegresiva(){
if (tiempo > 0){
tiempo--
}
else{
tiempo=10
}
document.fcuentareg.tiempoact.value=tiempo
setTimeout("cuentaRegresiva()",1000)
}
</script>
</head>
<body onload="cuentaRegresiva()">
<form name="fcuentareg">
<input type="text" name="tiempoact">
</form>
</body>
</html>
Explicando el código:
Cuando iniciamos la creación del Script ingresamos el tiempo a través de una variable con éste nombre, inicialmente lo hacemos con 10 segundos.
Luego iniciamos la fuunción cuentaRegresiva, la cual verifica si el tiempo es mayor que cero segundos, en éste caso, le disminuye su valor en una unidad, cuando éste valor llegue a cero, nuevamente lo inicializa a diez.
Porterior a eso, a un input Text llamado tiempoact y que se encuentra dentro de un formulario cuyo nombre es fcuentareg le asignamos como valor lo que en esos momentos tenga la variable tiempo.
La Función setTimeout ejecuta una función con un retraso determinado, dependiendo de los parámetros que se le pasen, en éste caso, le indicamos que ejecute la función cuentaRegresiva cada 1000 milisegundos, osea cada segundo.
Finalmente a la etiqueta Body, le agregamos el atributo Onload, al cual le indicamos como valor el nombre de la función cuentaRegresiva, ésto lo hacemos para que dicha función se ejecute sólo cuando la página se encuentre suficientemente cargada.
En los siguientes posts, mejoraremos éste pequeñísimo Script, agregándole la posibilidad de que el usuarios determine el tiempo, o una fecha específica, de igual manera vamos a cargar datos a través de AJAX para que se vea un poco más dinámico el efecto.
hola brother vi tu post, esta muy bueno, pero necesitaba preguntarte si puedo poner este conteo en forma de gadget añadido como elemento html/javascript en blogger. o es necesario ponerlo entre y o como…
Gracias por tu post. aprendi mucho, espero tu amable respuesta.
Hola joan.
Que bueno que te haya gustado el artículo.
Puedes agregar tranquilamente el JS a blogger, lo que debes hacer es incluír la etiqueta Script dentro del Header de la plantilla, y el campo de texto en cualquier parte del Body.
Te sugiero que visites mi nuevo Blog (http://yeinerf.blogspot.com) para nuevos Tips sobre Desarrollo Web y esas temáticas
.
Saludos!
Hace dos horas que estoy buscando esto!!!!!!!!!!
Muchas gracias, en serio…