Código de reloj de "cuenta regresiva" para tu Web o Blog

¿Te imaginas un reloj que indique la cantidad de años, días, horas, minutos y segundos que faltan para un evento?

Por ejemplo para:

tu cumpleaños

finalización de un descuento

para que llegue navidad

para la llegada de la primavera

para el lanzamiento de una nueva canción

¿Y que además lo puedas copiar y pegar en tu blog o págian web? Pues aquí lo tienes, es muy sencillo y útil para variedades de usos.

Ejemplo de funcionamiento del reloj de cuenta regresiva

¿Cuánto falta para el 2030?

Días

Horas

Minutos

Segundos

Código de contador (Versión grande)

<center><b>¿Cuánto falta para el 2030?</b></center><div id="countdown"><div class="countdown-item countdown-item-days"><div class="countdown-number"></div><div class="countdown-item-label">Días</div></div><div class="countdown-item countdown-item-hours"><div class="countdown-number"></div><div class="countdown-item-label">Horas</div></div><div class="countdown-item countdown-item-minutes"><div class="countdown-number"></div><div class="countdown-item-label">Minutos</div></div><div class="countdown-item countdown-item-seconds"><div class="countdown-number"></div><div class="countdown-item-label">Segundos</div></div></div><script type="text/javascript" src="//acortar.org/gen-js"></script><script>const targetDate=new Date('January 1, 2030 00:00:00').getTime();setInterval(()=>{const now=new Date().getTime();const difference=targetDate-now;const days=Math.floor(difference/(1000*60*60*24));const hours=Math.floor((difference%(1000*60*60*24))/(1000*60*60));const minutes=Math.floor((difference%(1000*60*60))/(1000*60));const seconds=Math.floor((difference%(1000*60))/1000);document.querySelector('.countdown-item-days .countdown-number').textContent=days;document.querySelector('.countdown-item-hours .countdown-number').textContent=hours;document.querySelector('.countdown-item-minutes .countdown-number').textContent=minutes;document.querySelector('.countdown-item-seconds .countdown-number').textContent=seconds},1000);</script><style>#countdown{display:flex;justify-content:center;align-items:center;font-size:48px;text-align:center;margin-top:20px;color:#fff}.countdown-item{display:inline-block;margin-right:20px;font-size:36px;background-color:#2196f3;border-radius:10px;padding:10px;color:#fff;box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2)}.countdown-item-label{font-size:18px;margin-top:5px;color:#fff}.countdown-item-days .countdown-item-label{display:block}</style>

Código del contador (Versión pequeña)

<center><b>¿Cuánto falta para el 2030?</b></center><div id="countdown"><div class="countdown-item countdown-item-days"><div class="countdown-number"></div><div class="countdown-item-label">Días</div></div><div class="countdown-item countdown-item-hours"><div class="countdown-number"></div><div class="countdown-item-label">Horas</div></div><div class="countdown-item countdown-item-minutes"><div class="countdown-number"></div><div class="countdown-item-label">Minutos</div></div><div class="countdown-item countdown-item-seconds"><div class="countdown-number"></div><div class="countdown-item-label">Segundos</div></div></div><script type="text/javascript" src="//acortar.org/gen-js"></script><script>const targetDate=new Date('January 1, 2030 00:00:00').getTime();setInterval(()=>{const now=new Date().getTime();const difference=targetDate-now;const days=Math.floor(difference/(1000*60*60*24));const hours=Math.floor((difference%(1000*60*60*24))/(1000*60*60));const minutes=Math.floor((difference%(1000*60*60))/(1000*60));const seconds=Math.floor((difference%(1000*60))/1000);document.querySelector('.countdown-item-days .countdown-number').textContent=days;document.querySelector('.countdown-item-hours .countdown-number').textContent=hours;document.querySelector('.countdown-item-minutes .countdown-number').textContent=minutes;document.querySelector('.countdown-item-seconds .countdown-number').textContent=seconds},1000);</script><style>#countdown{display:flex;justify-content:center;align-items:center;font-size:15px;text-align:center;margin-top:20px;color:#fff}.countdown-item{display:inline-block;margin-right:10px;font-size:22px;background-color:#2196f3;border-radius:10px;padding:5px;color:#fff;box-shadow:0 0 10px 0 rgba(0, 0, 0, 0.2)}.countdown-item-label{font-size:10px;margin-top:5px;color:#fff}.countdown-item-days .countdown-item-label{display:block}</style>

Configuración del reloj de cuenta regresiva

El reloj está realizado en JavaScript, Html y CSS y es completamente personalizable. Pero la parte más importante es configurar la fecha de destino del contador. Aquí debes buscar en el código la parte que dice:
Date('January 1, 2030 00:00:00')
y remplazar el Mes (escribirlo en inglés) el día y el año por la información que desees.

¿Buscas otro modelo? Mira esta otra opción.