Como calcular el tiempo en cuenta regresiva entre dos fechas JavaScript?
Estoy necesitando un codigo para calcular el tiempo restante en dias, minutos y segundos en varios label ( en cuenta regresiva ). Vi en varios lugares pero no se como hacerlo para varios la label al misml tiempo.
1 Respuesta
Acontinuación te paso el código.
El HTML.. Donde vas a importar simplemente el javascript "countdown.js"
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Cuenta Regresiva</title> </head> <body> <!-- TITULO DE EJEMPLO --> <h1>La página estara activa en:</h1> <hr> <!-- AQUí IRA EL CONTADOR --> <h3 id="clock"></h3> <!-- Script para insertar la Cuenta Regresiva --> <script src="countdown.js"></script> </body> </html>
Y aquí un código simple y muy útil para el contador
// Creamos las variables para obtener la canitdad correspondiente a cada una.
const getRemainTime = deadline => {
let now = new Date(),
remainTime = (new Date(deadline) - now + 1000) / 1000,
remainSeconds = ('0' + Math.floor(remainTime % 60)).slice(-2),
remainMinutes = ('0' + Math.floor(remainTime / 60 % 60)).slice(-2),
remainHours = ('0' + Math.floor(remainTime / 3600 % 24)).slice(-2),
remainDays = Math.floor(remainTime / (3600 * 24));
// Las retornamos a dichas variables
return {
RemainTime,
remainSeconds,
remainMinutes,
remainHours,
remainDays
}
};
// Creamos el contador
const countdown = (deadline, elem, finalMessage) => {
// Aqui la variable "elem" es donde vamos a guardar el contenido del contador el cual al final de todo en countdown se le pone el verdadero id "clock" del HTML.
const el = document.getElementById(elem);
const timerUpdate = setInterval( () => {
let t = getRemainTime(deadline);
// Aqui insertamos las variables en el <h3 id="clock"></h3>
el.innerHTML = `${t.remainDays}d:${t.remainHours}h:${t.remainMinutes}m:${t.remainSeconds}s`;
// Aca limpiamos el contador cuando llega a cero
if (t.remainTime <= 1) {
clearInterval(timerUpdate);
el.innerHTML = finalMessage;
}
}, 1000);
};
// Y por ultimo, en este formato SIN MODFIFICARLO, le pones las fecha que quieras, pero sin modificar el formato. Puede ser 'Oct 16 2018 15:20:51 GMT-0500', 'clock', 'El Mensajes que quieras puede aparecer aquúi'
Countdown('Sep 20 2020 10:32:53 GMT-0500', 'clock', 'Feliz 2020');Ya los estilos, queda a tu gusto. Esto simplemente muestra el contador, con la fecha que quieras y necesites modificar donde te dije al final de todo.
Una aclaración que quiero hacer, no lo hice anteriormente, es que donde ingresas la FECHA donde necesitas que termine la cuenta.. Una parte dice al final de todo "GMT-0500", eso dependerá de tu país donde te encuentres, en mi caso soy de Argentina por ende es "GMT-0300"
¿Y cómo saber cuál es de tu país? Lo puedes buscar en Google:
Ó la otra opción (Mas recomendable por lo rápido) es hacer CLICK DERECHO en el navegador que estés, en mi caso Google Chrome, y seleccionar la opción "Inspeccionar elementos" o "Inspeccionar" y en la pestaña "Consola" o "Console" escribir lo siguiente:
New Date();
Y eso te devolverá la fecha actual con un formato y mira donde dice "GMT- ..." y sabrás mediante eso cual te corresponder para colocar en el código:
Countdown('Sep 20 2020 10:32:53 GMT-0500', 'clock', 'Feliz 2020');
Acuerdate de crear el archivo countdown.js y ahí dentro colocar el código Javascript.
Si te gusto la ayuda y te fue útil, por favor, no olvides valorar la respuesta y recomendar.
Buenas Leandro! Antes que nada gracias por responder.. Te comento, tengo este código que hace muy parecido a lo que haces vos.. lo que necesito es poder hacer el calculo pero con varias fechas.
Es decir, por ejemplo:
El id="clock" que se compare con el 24/01/2018 a las 16hs.
El id="clock2" que se compare con el 27/02/2018 a las 17hs. Y así sucesivamente..
Este es el código que tengo en mi html:
<script type="text/javascript">
function countdown(id){
var fecha=new Date('jan 24 2018 16:00:53 GMT-0300')
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'
}
}
</script>html
<html>
<head>
<title>Prueba</title>
</head>
<body onload="countdown('contador')">
<h3 id='contador'></h3>
</body>
</html>
Ahora entendí bien lo que me has solicitado..
Lo estoy revisando para pasarte una solución a tu código, mientras tanto.. Quería pasarte este link, que por tu código creo que quizás ya lo hayas visitado.
https://www.jose-aguilar.com/blog/countdown-js/
Y acá en este link de abajo, podrás descargar (de forma automática te lo descarga) ese código pero que utiliza un script de PHP muy corto y sencillo. Si tienes XAMPP o WAMP o similares, como MAMP.. Lo podes probar ahí, es muy sencillo. Te permite elegir una fecha en un calendario que te muestra en un INPUT y ahí calcula la diferencia de fechas y te devuelve la cuenta regresiva.
--PD: Probar el que dice "index2.php"
https://www.jose-aguilar.com/scripts/javascript/countdown3/countdown3.zip
Aún así, como te dije, estoy revisando tu código para pasartelo en Javascript.
