Temporizador de cuenta regresiva moderno en Vanilla JavaScript-LS Countdown

Vista prévia

Descripción

La biblioteca LS Countdown le permite crear un moderno y configurable temporizador de cuenta regresiva para próximamente, en construcción, páginas en modo de mantenimiento.

Funcionamiento

Crear un temporizador de cuenta regresiva con días, horas, minutos, segundos ranuras.

<div id="countdown">

<div class="countdown-item days">0</div>

<div class="countdown-item hours">0</div>

<div class="countdown-item minutes">0</div>

<div class="countdown-item seconds">0</div>
</div>

El CSS de ejemplo para el temporizador de cuenta regresiva.

#countdown {

display: flex;

justify-content: center;

flex-wrap: wrap;
}

.countdown-item {

font-size: 20px;

border-radius: 50%;

text-align: center;

width:100px;

height: 100px;

line-height: 100px;

position: relative;

opacity: 0;

margin: 5px;
}

.countdown-item.show {

animation: fadein 2s forwards;
}

.countdown-item::before {

position: absolute;

content: ' ';

width: 100px;

height: 100px;

border-radius: 50%;

background-color: #fff;

left: 0;

top: 0;

opacity: .1;
}

.countdown-item.days {

animation-delay: 1s;
}

.countdown-item.hours {

animation-delay: 1.5s;
}

.countdown-item.minutes {

animation-delay: 2s;
}

.countdown-item.seconds {

animation-delay: 2.5s;
}

.countdown-item.days::after {

content: attr(data-days);
}

.countdown-item.hours::after {

content: attr(data-hours);
}

.countdown-item.minutes::after {

content: attr(data-minutes);
}

.countdown-item.seconds::after {

content: attr(data-seconds);
}

@keyframes fadein {

from { opacity: 0; }

to { opacity: 1; }
}

Descargue e importe el ' LS-Countdown. min. js ' en el documento.

<script src="/js/ls-countdown.min.js"></script>

El ejemplo de JavaScript para activar el temporizador de cuenta regresiva.

document.addEventListener("DOMContentLoaded", function () {

let currentYear = new Date().getFullYear();

let targetDate = new Date(currentYear + 1, 0, 1);

let onStart = () => {



document.querySelectorAll('.countdown-item').forEach(item => item.classList.add('show'))

}

let onTick = ({ days, hours, minutes, seconds }) => {



document.querySelector('.countdown-item.days').innerHTML = days;



document.querySelector('.countdown-item.hours').innerHTML = hours;



document.querySelector('.countdown-item.minutes').innerHTML = minutes;



document.querySelector('.countdown-item.seconds').innerHTML = seconds;

};

let options = new LsCountdownOptions({ targetDate, onStart, onTick });

let countdown = new LsCountdown(options);


countdown.start();

window.mycountdown = countdown;
});

Detenga el temporizador de cuenta regresiva manualmente.

countdown.stop();

Registro de cambios

12/02/2018

• v1.0.2