counter
 
 
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:
 
---------------------------------------------------

<!-- AVISO CONTADOR -->
<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&iacute;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>

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

<!-- AVISO CONTADOR -->
 
 
---------------------------------------------------

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.
 
 
 
Palabras Claves: fecha y reloj inverso de cuenta regresiva / hacer cuenta regresiva / conteo regresivo javascript / cuenta regresiva con recursividad en java / contador de dias horas minutos y segundos en javascript / como poner a funcionar un reloj cuenta regresiva con jquery / cuenta regresiva y ejecucion javascript /

Comentarios  

+1 #4 Nataral 09-02-2015 16:30
En el comentario anterior no se porque no salio.
en y2k = new Date("");
entre las comillas estaba la variable $datos['hora'] dentro de un bloque de codigo.
Citar
+1 #3 Nataral 09-02-2015 16:26
Me gusta muchisimo!
Pero tengo un problema, en mi base de datos las fechas hacia donde hago la cuenta regresiva.
En el codigo reemplaze
y2k = new Date("Dec 31 2012 23:59:59");

Por
y2k = new Date("");
$datos['hora'] corresponde al DateTime que tengo almacenado en mi BD.
Cuando hago un while de los registros de la tabla solo me aparece la 1ra cuenta regresiva. Todo los de+ datos aparecen bien.
¿Como hago para listar todas las cuentas regresivas?
Citar
+1 #2 fer 30-12-2013 11:09
hola disculpa la molestia no se nada de js pero necesito esto mismo pero que en lugar de una fecha futura sea desde una fecha y cuente acia adelante
es para poner en mi web y cuente los dias horas minutos y segundos en linea que yevo ok

seguro sera facil pero soi un negado para esto espero tu ayuda
un saludo fer
Citar
+1 #1 santi 01-01-2013 11:48
olaa mi pregunta seria como hacer este ejemplo para que la cuenta no comience hasta q el usuario no de al boton de comenzar como si subiera una subasta,claro no sabriamos a que hora va a empezar ni el dia q terminaria asta que el usario diese al boton de comenzar,me podrias hechar una mano diciendome como hacerlo,muchas gracias
Citar

Escribir un comentario

Nota: Los comentarios escritos en mayúsculas o tipo SMS serán eliminados, al igual que los comentarios ofensivos o sin educación contra los lectores y/o editores de este medio.

También pueden reportar los comentarios ofensivos para ser borrados.

Código de seguridad
Refescar