JSFiddle - React, Tailwind, and code Playground
HTML
<p><span id="time1"></span> (2 hours)</p>
<p><span id="time2"></span> (1 day)</p>
<p><span id="time3"></span> (1 day + 1 hour)</p>
<p><span id="time4"></span> (2 days)</p>
<p><span id="time5"></span> (2 days + 2 hours)</p>
JavaScript
(function(){
$.fn.lofCountDown = function( options ) {
return this.each(function() {
// get instance of the lofCountDown.
new $.lofCountDown( this, options );
});
}
$.lofCountDown = function( obj, options ){
this.options = $.extend({
autoStart : true,
LeadingZero:true,
DisplayFormat:"%%H%%:%%M%%:%%S%%",
FinishMessage:"Expired",
CountActive:true,
TargetDate:null
}, options || {} );
if( this.options.TargetDate == null || this.options.TargetDate == '' ){
return ;
}
this.timer = null;
this.element = obj;
this.CountStepper = -1;
this.CountStepper = Math.ceil(this.CountStepper);
this.SetTimeOutPeriod = (Math.abs(this.CountStepper)-1)*1000 + 990;
var dthen = new Date(this.options.TargetDate);
var dnow = new Date();
if( this.CountStepper > 0 ) {
ddiff = new Date(dnow-dthen);
}
else {
ddiff = new Date(dthen-dnow);
}
gsecs = Math.floor(ddiff.valueOf()/1000);
this.CountBack(gsecs, this);
};
$.lofCountDown.fn = $.lofCountDown.prototype;
$.lofCountDown.fn.extend = $.lofCountDown.extend = $.extend;
$.lofCountDown.fn.extend({
calculateDate:function( secs, num1, num2 ){
var s = ((Math.floor(secs/num1))%num2).toString();
if ( this.options.LeadingZero && s.length < 2) {
s = "0" + s;
}
return "<b>" + s + "</b>";
},
CountBack:function( secs, self ){
if (secs < 0) {
self.element.innerHTML = '<div class="lof-labelexpired"> '+self.options.FinishMessage+"</div>";
return;
}
clearInterval(self.timer);
DisplayStr =...