SOW : Countdown timer
SOW plugins are part of Smarty Core, written from scratch!
src/js/sow.core/sow.timer_countdown.js
Countdown Basic
By Seconds/Milliseconds
<!--
if data-timer-countdown-from > 1000, calculated in seconds (time / 1000)
if data-timer-countdown-from < 1000, considered seconds
Other Options
data-timer-countdown-end-hide-self="true"
data-timer-countdown-end-hide-target="#somecontainer"
data-timer-countdown-callback-function="myCallbackFunction"
myCallbackFunction = funtion(el) {
// el = countdown element ID. if no #id provided, is generated by the plugin
}
-->
<span class="hide timer-countdown" data-timer-countdown-from="100000"></span>
Countdown Date
By Date (the output is always in hours)!
<!--
Any standard date format is supported. Examples:
2020-11-21T13:19:11+0000
11/21/2021 16:00:00
Fri Jul 14 2020 23:21:03 GMT+0300
If date is in the past, callback function is not called!
Other Options
data-timer-countdown-end-hide-self="true"
data-timer-countdown-end-hide-target="#somecontainer"
data-timer-countdown-callback-function="myCallbackFunction"
myCallbackFunction = funtion(el) {
// el = countdown element ID. if no #id provided, is added by the plugin
}
-->
<span class="hide timer-countdown" data-timer-countdown-from="11/21/2025 16:00:00"></span>
Countdown Segmented
years
days
hours
minutes
seconds
<div class="hide timer-countdown timer-countdown-inline small" data-timer-countdown-from="11/21/2025 16:00:00">
<span class="bg-white shadow rounded p-3 m-1 text-center d-inline-block">
<span class="y d-block"></span>
<span class="smaller text-muted">years</span>
</span>
<span class="bg-white shadow rounded p-3 m-1 text-center d-inline-block">
<span class="d d-block"></span>
<span class="smaller text-muted">days</span>
</span>
<span class="bg-white shadow rounded p-3 m-1 text-center d-inline-block">
<span class="h d-block"></span>
<span class="smaller text-muted">hours</span>
</span>
<span class="bg-white shadow rounded p-3 m-1 text-center d-inline-block">
<span class="m d-block"></span>
<span class="smaller text-muted">minutes</span>
</span>
<span class="bg-white shadow rounded p-3 m-1 text-center d-inline-block">
<span class="s d-block"></span>
<span class="smaller text-muted">seconds</span>
</span>
</div>