En el siguiente ejemplo comparto en Javascript una cuenta atrás o un contador regresivo, mostrando un tiempo que retroceda dinámicamente con: días, horas, minutos y segundos.
Para usarlo debes cambiar la fecha de la variable DATE_TARGET por tu objetivo, tan sencillo como eso.
No tiene más misterio que encontrar la cantidad de milisegundos que tiene cada parcela de tiempo e ir haciendo una simple división con el resto del anterior (dicho así no parece fácil, pero al leer el código enseguida caes en su funcionamiento). Si hay alguna duda he añadido algunos comentarios, aviso que en inglés. Y cualquier otro asunto puedes dejarme un comentario.
Demo
días / horas / minutos / segundos
HTML
<section>
<p>
<span id="days"></span> días / <span id="hours"></span> horas / <span id="minutes"></span> minutos / <span id="seconds"></span> segundos
</p>
</section>
Javascript
//===
// VARIABLES
//===
const DATE_TARGET = new Date('04/13/2020 0:01 AM');
// DOM for render
const SPAN_DAYS = document.querySelector('span#days');
const SPAN_HOURS = document.querySelector('span#hours');
const SPAN_MINUTES = document.querySelector('span#minutes');
const SPAN_SECONDS = document.querySelector('span#seconds');
// Milliseconds for the calculations
const MILLISECONDS_OF_A_SECOND = 1000;
const MILLISECONDS_OF_A_MINUTE = MILLISECONDS_OF_A_SECOND * 60;
const MILLISECONDS_OF_A_HOUR = MILLISECONDS_OF_A_MINUTE * 60;
const MILLISECONDS_OF_A_DAY = MILLISECONDS_OF_A_HOUR * 24
//===
// FUNCTIONS
//===
/**
* Method that updates the countdown and the sample
*/
function updateCountdown() {
// Calcs
const NOW = new Date()
const DURATION = DATE_TARGET - NOW;
const REMAINING_DAYS = Math.floor(DURATION / MILLISECONDS_OF_A_DAY);
const REMAINING_HOURS = Math.floor((DURATION % MILLISECONDS_OF_A_DAY) / MILLISECONDS_OF_A_HOUR);
const REMAINING_MINUTES = Math.floor((DURATION % MILLISECONDS_OF_A_HOUR) / MILLISECONDS_OF_A_MINUTE);
const REMAINING_SECONDS = Math.floor((DURATION % MILLISECONDS_OF_A_MINUTE) / MILLISECONDS_OF_A_SECOND);
// Thanks Pablo Monteserín (https://pablomonteserin.com/cuenta-regresiva/)
// Render
SPAN_DAYS.textContent = REMAINING_DAYS;
SPAN_HOURS.textContent = REMAINING_HOURS;
SPAN_MINUTES.textContent = REMAINING_MINUTES;
SPAN_SECONDS.textContent = REMAINING_SECONDS;
}
//===
// INIT
//===
updateCountdown();
// Refresh every second
setInterval(updateCountdown, MILLISECONDS_OF_A_SECOND);
Ejemplo completo
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8"/>
<title>ejemplo contador regresivo</title>
</head>
<body>
<!-- Contador regresivo -->
<section>
<p>
<span id="days"></span> días / <span id="hours"></span> horas / <span id="minutes"></span> minutos / <span id="seconds"></span> segundos
</p>
</section>
<!-- Fin contador regresivo -->
<script>
document.addEventListener('DOMContentLoaded', () => {
//===
// VARIABLES
//===
const DATE_TARGET = new Date('04/13/2021 0:01 AM');
// DOM for render
const SPAN_DAYS = document.querySelector('span#days');
const SPAN_HOURS = document.querySelector('span#hours');
const SPAN_MINUTES = document.querySelector('span#minutes');
const SPAN_SECONDS = document.querySelector('span#seconds');
// Milliseconds for the calculations
const MILLISECONDS_OF_A_SECOND = 1000;
const MILLISECONDS_OF_A_MINUTE = MILLISECONDS_OF_A_SECOND * 60;
const MILLISECONDS_OF_A_HOUR = MILLISECONDS_OF_A_MINUTE * 60;
const MILLISECONDS_OF_A_DAY = MILLISECONDS_OF_A_HOUR * 24
//===
// FUNCTIONS
//===
/**
* Method that updates the countdown and the sample
*/
function updateCountdown() {
// Calcs
const NOW = new Date()
const DURATION = DATE_TARGET - NOW;
const REMAINING_DAYS = Math.floor(DURATION / MILLISECONDS_OF_A_DAY);
const REMAINING_HOURS = Math.floor((DURATION % MILLISECONDS_OF_A_DAY) / MILLISECONDS_OF_A_HOUR);
const REMAINING_MINUTES = Math.floor((DURATION % MILLISECONDS_OF_A_HOUR) / MILLISECONDS_OF_A_MINUTE);
const REMAINING_SECONDS = Math.floor((DURATION % MILLISECONDS_OF_A_MINUTE) / MILLISECONDS_OF_A_SECOND);
// Thanks Pablo Monteserín (https://pablomonteserin.com/cuenta-regresiva/)
// Render
SPAN_DAYS.textContent = REMAINING_DAYS;
SPAN_HOURS.textContent = REMAINING_HOURS;
SPAN_MINUTES.textContent = REMAINING_MINUTES;
SPAN_SECONDS.textContent = REMAINING_SECONDS;
}
//===
// INIT
//===
updateCountdown();
// Refresh every second
setInterval(updateCountdown, MILLISECONDS_OF_A_SECOND);
});
</script>
</body>
</html>
Deja un comentario por si se te ocurre alguna mejora o te ha servido de ayuda.
{{ comments.length }} comentarios