Author: | fionnachan |
---|---|
Views Total: | 21,511 views |
Official Page: | Go to website |
Last Update: | October 5, 2018 |
License: | MIT |
Preview:

Description:
An easy-to-style countdown timer implementation in pure JavaScript. It will display EXPIRED when the countdown is over.
How to use it:
Create the day/hour/minute/second slots for the countdown timer. And then specify the datetime you want to countdown from as these:
<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>
Place the JavaScript file ‘countdown.js’ at the bottom of the webpage.
<script src="countdown.js"></script>
Create a new countdown object to activate the countdown timer.
const myCountdown = new countdown({ target: '.countdown', dayWord: ' days', hourWord: ' hours', minWord: ' mins', secWord: ' seconds' });
Stylize the countdowm timer in the 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; }
Changelog:
10/05/2018
- updated countdown.js