Cuenta atrás con JavaScript
En este blog he creado varios artículos que permiten crear una cuenta atrás con JavaScript y otras librerías pero, en este artículo vas a descubrir la fórmula definitiva para disponer de una cuenta atrás en tu sitio web que no tiene ningún desperdicio.
El script que estoy ilustrando no es muy complejo pero te va a ayudar muchísimo con tus habilidades en JavaScript y vas a conocer como manejar el objeto Date que es el que permite trabajar con fechas: años, meses, días, horas, minutos y segundos.
Además, también vas a conocer algunos aspectos o detalles del JavaScript moderno, como la declaración de funciones o la creación de objetos.
Este código de cuenta atrás o regresiva lo puedes utilizar para hacer saber a los usuarios cuanto falta para el lanzamiento de un producto, cuanto falta para iniciar un descuento o cuanto falta para un evento, etc.
Hay muchos usos para una cuenta regresiva.
En el ejemplo en funcionamiento vas a poder ver varias cuentas regresivas en la que su fecha de fin se calcula de forma aleatoria.
La inclusión de una cuenta regresiva en tu página web es muy sencilla usando JavaScript.
Contenedor de la cuenta atrás
En el cuerpo de la página o dentro de la etiqueta <body> puedes agregar un contenedor para agregar la cuenta regresiva, como por ejemplo:
Código JavaScript para la cuenta regresiva
Crea un archivo countdown.js en tu proyecto para armar la lógica de la cuenta regresiva e incluirlo en la cabecera o dentro del <head> de tu página HTML:
Por temas de rendimiento, también puedes situar la inclusión de este archivo antes de la etiqueta de cierre </body>.
El archivo countdown.js contiene el siguiente código:
const getTime = dateTo => {
let now = new Date(),
time = (new Date(dateTo) - now + 1000) / 1000,
seconds = ('0' + Math.floor(time % 60)).slice(-2),
minutes = ('0' + Math.floor(time / 60 % 60)).slice(-2),
hours = ('0' + Math.floor(time / 3600 % 24)).slice(-2),
days = Math.floor(time / (3600 * 24));
return {
seconds,
minutes,
hours,
days,
time
}
};
const countdown = (dateTo, element) => {
const item = document.getElementById(element);
const timerUpdate = setInterval( () => {
let currenTime = getTime(dateTo);
item.innerHTML = `
<div class="row">
<div class="col-lg-2">
<div class="countdown-container">
<div class="number">
${currenTime.days}
</div>
<div class="concept">
Días
</div>
</div>
</div>
<div class="col-lg-2">
<div class="countdown-container">
<div class="number">
${currenTime.hours}
</div>
<div class="concept">
Horas
</div>
</div>
</div>
<div class="col-lg-2">
<div class="countdown-container">
<div class="number">
${currenTime.minutes}
</div>
<div class="concept">
Minutos
</div>
</div>
</div>
<div class="col-lg-2">
<div class="countdown-container">
<div class="number">
${currenTime.seconds}
</div>
<div class="concept">
Segundos
</div>
</div>
</div>
</div>`;
if (currenTime.time <= 1) {
clearInterval(timerUpdate);
alert('Fin de la cuenta '+ element);
}
}, 1000);
};
Necesito la fecha límite, es decir, cuando va a acabar la cuenta regresiva y la fecha actual. Hago la resta que retorna mili segundos y luego lo convierto a días, horas, minutos y segundos de forma que pueda entender una persona. Por último, utilizo la función setInterval() para actualizar la cuenta regresiva cada segundo.
La función getTime() recibe un parámetro, la fecha hasta la que se quiere hacer la cuenta atrás. Esta función retorna un objeto con el tiempo, días, hora, minutos y segundos.
La función countdown() recibe 2 parámetros. La fecha en la que finaliza la cuenta atrás y el elemento HTML que la contiene. Esta función se encarga de localizar el elemento que contiene la cuenta regresiva y ejecutar cada segundo el visualizado del tiempo que falta para llegar a la fecha indicada.
Cuando el tiempo llega a su fin, se imprime una alerta con un mensaje. En este punto, se podría hacer todo lo que se te ocurra. Mostrar un mensaje en algún contenedor, hacer desaparecer la cuenta regresiva e incluso hacer una llamada Ajax para actualizar algo en el servidor.
El contenedor HTML se actualiza cada segundo con el contenido literal del tiempo que falta para llegar a al fecha indicada.
Algo de maquetación CSS
En el caso del ejemplo en funcionamiento estoy usando Bootstrap y algunas reglas CSS que puedes ver a continuación:
.countdown-container {
padding: 20px;
background-color: #222222;
margin-bottom: 20px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.countdown-container .number {
font-size: 32px;
text-align: center;
padding-top: 20px;
color: #FFFFFF;
background-color: #000000;
height: 90px;
}
.countdown-container .concept {
font-size: 28px;
text-align: center;
color: #000000;
}
Obteniendo como resultado algo como lo siguiente:
Como puedes comprobar, no me he esmerado demasiado en el diseño pero, ya puedes observar que es totalmente personalizable.
Si mejoráis este diseño, enviar un comentario con el código para que veamos más posibilidades.
Conclusión
He visto muchos códigos para crear una cuenta atrás, también un puñado de plugins pero, este código me convence mucho ya que es JavaScript puro y muy sencillo de personalizar.
No utiliza librerías ni plugins adicionales que suelen tener demasiadas opciones siendo archivos algo grandes que hacen que la página tarde unos mili segundos más en cargar.
Este código pesa muy poco y, además, si tienes conocimientos básicos sobre JavaScript y CSS tienes la posibilidad de personalizarlo completamente.
Esta entrada ha sido actualizada el 20/08/2019.
Esta bueno, todo con javascript moderno, todo ok.
Como hago para quitar el texto «hu Oct 28 2021 19:29:02 GMT-0500 (hora estándar de Colombia)», seria de gran ayuda gracias
Hola,
No estoy seguro a que te refieres. ¿donde sale ese texto?
Saludos
Hola, quisiera saber como le haría para que cuando termine el contador me pareciera un mensaje, desde ya muchas gracias
hola quiero hacer algo parecido a este tutorial pero la verdad no mefunciona el codigo simplemente no me muestra el resultado
Gracias, me ha sido de mucha ayuda. 😀
Hasta he quitado los enlaces a jquery, porque funciona perfectamente sin ellos.
Hola Jose eh estado viendo la mayoria de tus articulos desde que encontre tu pagina y me a fascinado este codigo como lo podria acoplar para que al pasar 3min se haga un UPDATE a una tabla de bd mysql?? con php
saludos
Hola buenas tardes,
Este es un post muy antiguo pero funciona todavía. Ahora hay otras formas más ortodoxas de realizar una cuenta atrás como por ejemplo jQuery Countdown o Countdown Dashboard
Hola Emanuel,
eso es porque el contador empieza con 0, es decir, al introducir la fecha 0 es enero, 1 es febrero, 2 es marzo… y así sucesivamente
Estoy utilizando este contador solo para que sea visualizado, sin que el usuario ingrese una fecha… Introduzco en el codigo la fecha: 2 de marzo de 2013
var fecha=new Date(\’2013\’,\’3\’,\’2\’,\’11\’,\’00\’,\’00\’)
y me da como resultado que faltan 90 días y esto no puede ser así. Estamos en 2 de enero.
¿Me podrías guiar en como resolverlo?
Desde ya gracias y disculpas por la molestia.
Saludos, espero respuesta.
Emanuel
Hola Enmanuel que tal,
Si me envías el código completo de tu ejemplo podré ayudarte mejor.
Saludos,
me pudieras pasar el código completo de tu pagina de arriba porfa
Hola,
Hemos habilitado la descarga en:
http://www.jose-aguilar.com/scripts/javascript/countdown3/countdown3.zip
Saludos
gracias como lo envió o imprimo en otra pagina php
Hola Jose, soy de montevideo.
sabes te queria preguntar como hacer para este script hacerlo interactuar con php?
osea que me muestre una cuanta atras con la fecha proporcionada con base de datos mysql?
este es mi script :
<?php
if (!function_exists("GetSQLValueString")) {
function GetSQLValueString($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
if (PHP_VERSION
...
function countdown(id){
var fecha=new Date("")"aqui pongo la fecha extraida desde la base de datos"
var hoy=new Date()
var dias=0
var horas=0
var minutos=0
var segundos=0
if (fecha>hoy){
var diferencia=(fecha.getTime()-hoy.getTime())/1000
dias=Math.floor(diferencia/86400)
diferencia=diferencia-(86400*dias)
horas=Math.floor(diferencia/3600)
diferencia=diferencia-(3600*horas)
minutos=Math.floor(diferencia/60)
diferencia=diferencia-(60*minutos)
segundos=Math.floor(diferencia)
document.getElementById(id).innerHTML='Quedan ' + dias + ' Días, ' + horas + ' Horas, ' + minutos + ' Minutos, ' + segundos + ' Segundos'
if (dias>0 || horas>0 || minutos>0 || segundos>0){
setTimeout("countdown("" + id + "")",1000)
}
}
else{
document.getElementById('restante').innerHTML='Quedan ' + dias + ' Días, ' + horas + ' Horas, ' + minutos + ' Minutos, ' + segundos + ' Segundos'
}
}
por favor me puedes decir que codigo lleva el archivo index2.php el cual es llamado en esta linea de codigo
ubicada dentro del body
Hello there, just changed into alert to your blog through Google, and located that it’s really informative. I am going to watch out for brussels. I will appreciate when you continue this in future. Numerous people will likely be benefited out of your writing. Cheers!