Hacer Contador, Cuenta Regresiva en Javascript

Publicado: Jueves, 29 Diciembre 2011

Escrito por Redacción Mundonets

En esta ocasión vamos a ver un pequeño tutorial donde crearemos una cuenta regresiva en Javascript que se imprime en pantalla y se va actualizando inmediatamente con el pasar de los segundos.
xxxxxxxxxxxxxxxxxxxxxxx

Este contador nos puede servir de diferentes maneras, si vamos anunciar un producto en nuestra web en determinada fecha, si queremos hacer una cuenta regresiva para una fecha específica.

Nuestro contador quedara así, es totalmente personalizable a su gusto con el color y fuente que deseen.

Ver contador.

El código para crear el contador es el siguiente:

---------------------------------------------------


<div align="center">
<script languaje="JavaScript">
function getTime() {
now = new Date();
y2k = new Date("Dec 31 2012 23:59:59");
days = (y2k - now) / 1000 / 60 / 60 / 24;
daysRound = Math.floor(days);
hours = (y2k - now) / 1000 / 60 / 60 - (24 * daysRound);
hoursRound = Math.floor(hours);
minutes = (y2k - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
minutesRound = Math.floor(minutes);
seconds = (y2k - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
secondsRound = Math.round(seconds);
sec = (secondsRound == 1) ? " segundo" : " segundos";
min = (minutesRound == 1) ? " minuto" : " minutos, ";
hr = (hoursRound == 1) ? " hora" : " horas, ";
dy = (daysRound == 1) ? " día" : " días, "
document.getElementById("counter").innerHTML = "Faltan " + daysRound + dy + hoursRound + hr + minutesRound + min + secondsRound + sec + " <br />para el 2012!!!";
newtime = window.setTimeout("getTime();", 1000);
}
</script>
<body onLoad="getTime()">
</div>

---------------------------------------------------

En esta área definimos el estilo (Color, Fuente, etc.).

<p style="color:#000000;text-align:center;" id="counter"></p>

En esta otra definimos hasta dónde va la cuenta regresiva, en este caso hasta las 12: 59:59pm del 31 de Diciembre del 2017, ósea hasta el principio del año 2018.

y2k = new Date("Dec 31 2012 23:59:59");

Descargar bloc de notas con código funcionando!

Bastante sencillo, cualquier duda no duden en comentarla.