Temporizador de cuenta regresiva fácil de DateTime-Countdown. js

Vista prévia

Descripción

Una implementación de temporizador de cuenta regresiva fácil de estilo en JavaScript puro. Se mostrará caducado cuando la cuenta regresiva ha terminado.

Funcionamiento

Cree las ranuras de día/hora/minuto/segundo para el temporizador de cuenta regresiva. Y luego especifique la fecha y hora desde la que desea contar la cuenta regresiva:

<div class="countdown" data-date="14-7-2017" data-time="12:00">

<div class="day"><span class="num"></span><span class="word"></span></div>

<div class="hour"><span class="num"></span><span class="word"></span></div>

<div class="min"><span class="num"></span><span class="word"></span></div>

<div class="sec"><span class="num"></span><span class="word"></span></div>
</div>

Coloque el archivo JavaScript ' Countdown. js ' en la parte inferior de la Página Web.

<script src="countdown.js"></script>

Cree un nuevo objeto de cuenta regresiva para activar el temporizador de cuenta regresiva.

const myCountdown = new countdown({

target: '.countdown',

dayWord: ' days',

hourWord: ' hours',

minWord: ' mins',

secWord: ' seconds'
});

Estilizar el temporizador countdowm en el CSS.

.countdown {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

padding: 10px 20px;

border: 1px solid black;
}

.countdown .day, .countdown .hour, .countdown .min, .countdown .sec {

padding: 20px;

text-align: center;
}

.countdown .day .num, .countdown .hour .num, .countdown .min .num, .countdown .sec .num {

display: block;

font-size: 40px;
}

.countdown .day .word, .countdown .hour .word, .countdown .min .word, .countdown .sec .word {

display: block;

font-size: 20px;
}

Registro de cambios

10/05/2018

• Countdown. js actualizado