jQuery timer countdown between two dates

The following code implements how to do timer countdown between two dates in jQuery. The code calculates time in Days, Hours, Mins, Secs based on CURRENT TIME and TWO GIVEN TIMES. Also, a <p> tag or a <span> tag is needed, with  on the form or phtml file where the countdown needs to be shown -- like below:

<?php

 echo "Time remaining " . 
'<span id="timer" style="color:red;"></span>' 
. " for delivery";

?>

var AUShippingcountdownTimer = {

    currentTime: '',
    todayEndTime: '',
    tomorrowEndTime:'',

    setTodayEndTime:function(value) {
        this.todayEndTime = value;
    },

    setTomorrowEndTime:function(value) {
        this.tomorrowEndTime = value;
    }
}

jQuery(function() {

    var endToday = new Date(AUShippingcountdownTimer.todayEndTime);

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
    var now = new Date();
    var distanceToday = endToday - now;
       
        //if distanceToday < 0 meaning, today 3pm already passed then end date will be tomorrow 3pm
        if (distanceToday < 0) {
            clearInterval(timer);
            var endTomorrow = new Date(AUShippingcountdownTimer.tomorrowEndTime);
            var distanceTomorrow = endTomorrow - now;
            var days = Math.floor(distanceTomorrow / _day);
            var hours = Math.floor((distanceTomorrow % _day) / _hour);
            var minutes = Math.floor((distanceTomorrow % _hour) / _minute);
            var seconds = Math.floor((distanceTomorrow % _minute) / _second);

            document.getElementById('timer').innerHTML = days + 'days ';
            document.getElementById('timer').innerHTML += hours + 'HRS ';
            document.getElementById('timer').innerHTML += minutes + 'MINS ';
            document.getElementById('timer').innerHTML += seconds + 'SECS';

            timer = setInterval(showRemaining, 1000);
        }
        else {
            clearInterval(timer);
            var days = Math.floor(distanceToday / _day);
            var hours = Math.floor((distanceToday % _day) / _hour);
            var minutes = Math.floor((distanceToday % _hour) / _minute);
            var seconds = Math.floor((distanceToday % _minute) / _second);

            document.getElementById('timer').innerHTML = days + 'days ';
            document.getElementById('timer').innerHTML += hours + 'HRS ';
            document.getElementById('timer').innerHTML += minutes + 'MINS ';
            document.getElementById('timer').innerHTML += seconds + 'SECS';

            timer = setInterval(showRemaining, 1000);
        }
    }
timer = setInterval(showRemaining, 1000);

});

The purpose of the above code was to assign time values from Magento/PHP to this javascript. Yes, you heard it right!

So, all is needed is to provide DATE/TIME values for

setTodayEndTime

setTomorrowEndTime

The above two are javascript object functions which work as normal functions or method in PHP.

And, we can pass DATE/TIME values, in Magento from a phtml file, to two those objects  like below,

<?php
$getLatestDispatchTime = "3pm";
?>
<script type="text/javascript">
    AUShippingcountdownTimer.setTodayEndTime('<?php echo date('Y/m/d H:i:s', strtotime('today ' . $getLatestDispatchTime)); ?>');
    AUShippingcountdownTimer.setTomorrowEndTime('<?php echo date('Y/m/d H:i:s', strtotime('tomorrow ' . $getLatestDispatchTime)); ?>');
</script>

Hope it helps!

The above code is initially originated from

http://stackoverflow.com/questions/9335140/how-to-countdown-to-a-date

Kudos to the author