Countdown
A simple and HTML agnostic date countdown plugin with different countdown options.
How to use?
To add hs.countdown.js
in your page, wrap any block in a parent element with an ID or class and add the same ID or the class in the JS init function of the plugin, set the time data-end-date=""
and data-*-format=""
.
Copy-paste the following <script>
near the end of your pages under JS Implementing Plugins to enable it.
<script src="assets/vendor/jquery.countdown.min.js"></script>
Copy-paste the following <script>
near the end of your pages under JS Space to enable it.
<script src="assets/js/helpers/hs.countdown.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of countdowns
var countdowns = $.HSCore.components.HSCountdown.init('.js-countdown', {
yearsElSelector: '.js-cd-years',
monthsElSelector: '.js-cd-months',
daysElSelector: '.js-cd-days',
hoursElSelector: '.js-cd-hours',
minutesElSelector: '.js-cd-minutes',
secondsElSelector: '.js-cd-seconds'
});
});
</script>
Basic example
<div class="js-countdown"
data-end-date="2020/11/30"
data-years-format="%Y"
data-months-format="%M"
data-days-format="%D"
data-hours-format="%H"
data-minutes-format="%M"
data-seconds-format="%S">
<strong class="js-cd-years"></strong>
<strong class="js-cd-months"></strong>
<strong class="js-cd-days"></strong>
<strong class="js-cd-hours"></strong>
<strong class="js-cd-minutes"></strong>
<strong class="js-cd-seconds"></strong>
</div>
Examples
HTML:
<div class="js-countdown row"
data-end-date="2020/11/30"
data-month-format="%m"
data-days-format="%D"
data-hours-format="%H"
data-minutes-format="%M"
data-seconds-format="%S">
<div class="col-6 col-sm-3 mb-7 mb-sm-0">
<span class="js-cd-days d-block display-4 text-primary font-weight-medium"></span>
<span class="d-block h5 font-weight-normal mb-0">Days</span>
</div>
<div class="col-6 col-sm-3 mb-7 mb-sm-0">
<span class="js-cd-hours d-block display-4 text-primary font-weight-medium"></span>
<span class="d-block h5 font-weight-normal mb-0">Hours</span>
</div>
<div class="col-6 col-sm-3">
<span class="js-cd-minutes d-block display-4 text-primary font-weight-medium"></span>
<span class="d-block h5 font-weight-normal mb-0">Mins</span>
</div>
<div class="col-6 col-sm-3">
<span class="js-cd-seconds d-block display-4 text-primary font-weight-medium"></span>
<span class="d-block h5 font-weight-normal mb-0">Secs</span>
</div>
</div>
JS library and initialization:
<!-- JS Implementing Plugins -->
<script src="assets/vendor/jquery.countdown.min.js"></script>
<!-- JS Implementing Plugins -->
<script src="assets/js/helpers/hs.countdown.js"></script>
<!-- JS Plugins Init. -->
<script>
$(document).on('ready', function () {
// initialization of countdowns
var countdowns = $.HSCore.components.HSCountdown.init('.js-countdown', {
yearsElSelector: '.js-cd-years',
monthsElSelector: '.js-cd-months',
daysElSelector: '.js-cd-days',
hoursElSelector: '.js-cd-hours',
minutesElSelector: '.js-cd-minutes',
secondsElSelector: '.js-cd-seconds'
});
});
</script>
Methods
Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-
, as in data-start-date=""
.
Attribute | Description |
---|---|
|
Date from which the time period will be calculated. |
|
Date to which the time period will be calculated. |
|
Display format for years. |
|
Display format for months. |
|
Display format for days. |
|
Display format for hours. |
|
Display format for minutes. |
|
Display format for seconds. |
|
Activates the ability to add SVG-circles around the clock, minutes, seconds, etc. |
|
Adds border-radius for SVG-circles, if data-circles-radius="" is set to true . |
|
Adds border-width for SVG-circles, if data-circles="" is set to true . |
|
Adds fill color for SVG-circles, if data-circles="" is set to true . |
|
Adds background color for SVG-circles, if data-circles="" is set to true . |
|
Adds the postfix to the digital value, if data-circles="" is set to true . |
|
Adds font-size inside the SVG-circles, if data-circles="" is set to true . |
Official Documentation
For more detailed information, see the official documentation: jQuery Countdown documentation.