Countdown Timer
Visual countdown timer, useful to limit offers or do something.
Atropos only
1.4kb gzipped
Countdown Examples
By Milliseconds
By Seconds
By Hours
By Days
By Date (11/21/2023 16:00:00)
By Date (using markup)
days
hours
minutes
seconds
<!-- By Milliseconds -->
<h2 data-sow-countdown='{"msec":100000}'></h2>
<!-- By Seconds -->
<h2 data-sow-countdown='{"sec":3600}'></h2>
<!-- By Hours -->
<h2 data-sow-countdown='{"hrs":1}'></h2>
<!-- By Days -->
<h2 data-sow-countdown='{"days":1}'></h2>
<!--
By Date
Any standard date format supported.
2023-11-21T16:00:00+0000
11/21/2023 16:00:00
Fri Jul 14 2023 16:00:00 GMT+0300
-->
<h2 data-sow-countdown='{"dateEnd":"12/21/2023 16:00:00"}'></h2>
<!-- By Date (using markup) -->
<div class="d-inline-grid gap-auto-1" data-sow-countdown='{"dateEnd":"12/21/2023 16:00:00"}'>
<span class="d-inline-block p-3 shadow text-center">
<span class="d"></span>
<small class="d-block">days</small>
</span>
<span class="d-inline-block p-3 shadow text-center">
<span class="h"></span>
<small class="d-block">hours</small>
</span>
<span class="d-inline-block p-3 shadow text-center">
<span class="m"></span>
<small class="d-block">minutes</small>
</span>
<span class="d-inline-block p-3 shadow text-center">
<span class="s"></span>
<small class="d-block">seconds</small>
</span>
</div>
<!--
All available options
**
date_current = Optional : server current date (if empty = client device date)
Any standard date format supported.
2023-11-21T16:00:00+0000
11/21/2021 16:00:00
Fri Jul 14 2023 16:00:00 GMT+0300
**
redirectUrl = redirect the page to specified url
**
.d-none-important = a class to hide any element (overwriting .d-none)
**
Use only one option between "msec" and "dateEnd"
The script will check them in order and stops to the first valid one!
-->
data-sow-countdown='{
"msec" : "0",
"sec" : "0",
"min" : "0",
"hrs" : "0",
"days" : "0",
"dateEnd" : "",
"dateCurrent" : "",
"onStart" : {
"#some_element": {
"classAdd" : ["class1","class2"],
"classRemove" : ["d-none-important"]
},
".another_element": {
"classAdd" : ["d-none-important"],
"classRemove" : []
},
"redirectUrl" : ""
},
"onEnd" : {
"#some_element": {
"classAdd" : ["class1","class2"],
"classRemove" : ["d-none-important"]
},
".another_element": {
"classAdd" : ["d-none-important"]
"classRemove" : []
},
"redirectUrl" : ""
},
}'
/**
If 'Data Options' is not enough, create your own js functions
to fire when a countdown started and/or finished!
**/
/* Countdown Element */
var elCountdown = document.getElementById('countdownID')
/* Countdown Started */
elCountdown.addEventListener('started.sow.countdown', function (el) {
// code...
});
/* Countdown Ended */
elCountdown.addEventListener('ended.sow.countdown', function (el) {
// code...
});