I'm creating a system where I have to check the deadline based on the client's initialization. For example, if the client's initialization was today at time x and the deadline is tomorrow or future at time y, I would like to calculate the time remaining inform of a countdown timer. I have managed to get the time remaining and my problem is count down timer to show the remaining days, hours, minutes, and seconds.
The following HTML code indicates the remaining time to the deadline
<span style='color: green;'>
<span class='e-m-days'>0</span> Days |
<span class='e-m-hours'>8</span> Hours |
<span class='e-m-minutes'>0</span> Minutes |
<span class='e-m-seconds'>1</span> Seconds
</span>
My jQuery code:
<script>
$(function(){
var days = parseInt( $('.e-m-days').html() );
var hours = parseInt( $('.e-m-hours').html() );
var minutes = parseInt( $('.e-m-minutes').html() );
var seconds = parseInt( $('.e-m-seconds').html() );
var minutesWrap = 0;
var hoursWrap = 0;
var daysWrap;
var hoursRem = hours;
var timer = seconds;
var counter =seconds;
function countOrdersRemainingTime(){
var id = setTimeout(countOrdersRemainingTime, 1000);
if(timer < 0){
minutesWrap ++;
timer = 59;
}
var minRem = minutes - minutesWrap;
if( minRem == -1 ){
hoursWrap + 1;
minRem = 59;
var hoursRem = hours - 1;
}
if(days == 0 && hours == 0 && minutes == 0 && seconds == 0){
clearTimeout(id);
}
$('.e-m-seconds').html(timer);
$('.e-m-minutes').html(minRem);
$('.e-m-hours').html(hoursRem);
timer --;
}
countOrdersRemainingTime();
});
</script>
The key thing is to create a count down timer that counts until the deadline is reached, i.e until the number of days, hours, minutes, and seconds becomes zero. I have tried for hours with no success :(.