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?
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?
<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>
Publicar un comentario