Question

I have a requirement to make a countdown timer that automatically restarts when the time has elapsed.

For example, I need to countdown from 3pm or 15:00 UK time and reset to start counting again when the time has reached.

I’ve been trying with some jQuery but that will show browser time and not server time. If anyone is able to share a solution please let me know.

Thanks in advance!

The code below is a working example from which works perfectly: https://gist.github.com/Majestik/3964527

if (document.getElementById('countdownTimer')) {
    pad = function(n, len) { // leading 0's
        var s = n.toString();
        return (new Array( (len - s.length + 1) ).join('0')) + s;
    };
    function countDown() {
        var now = new Date();
        if ( (now.getDay() >= 1) && (now.getDay() <= 5) ) { // Monday to Friday only
            var target = 15; // 15:00hrs is the cut-off point
            if (now.getHours() < target) { // don't do anything if we're past the cut-off point
                var hrs = (target - 1) - now.getHours();
                if (hrs < 0) hrs = 0;
                var mins = 59 - now.getMinutes();
                if (mins < 0) mins = 0;
                var secs = 59 - now.getSeconds();
                if (secs < 0) secs = 0;
                var str = pad(hrs, 2) + ':' + pad(mins, 2) + '.<small>' + pad(secs, 2) + '</small>';
                document.getElementById('countdownTimer').innerHTML = str;
            }
        }
    }
    var timerRunning = setInterval('countDown()', 1000);
}

 Time remaining: <span id="countdownTimer"><span>00:00.<small>00</small></span>

Answer 1

In your PHP code when you are writing the HTML that includes this javascript file just set the variables there rather than getting javascript to do it once it has loaded, this way you are using your server time rather than the browser time.