Código de reloj de "cuenta regresiva" para tu Sitio 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?

advertise

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

Ejemplo de funcionamiento del reloj de cuenta regresiva ¿Cuánto falta para el 2030?

advertise

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

advertise
advertise

Publicar un comentario