Javascript repeating countdown timer to midday

Question

I am trying to create a javascript countdown which displays the hours and minutes, counting down to midday each day. When midday is reached I would like the timer to reset and start counting down to midday again (obviously to countdown to the following day).

I have the code below, however I just can't get it to work properly, the code works fine after midday however once midnight is reached the count is incorrect.

Here is my code:

function ShowTimes() {
    var now = new Date();
    var hrtime = now.getHours()
    var hrs = 23 - hrtime + 12;
    var mins = 59-now.getMinutes();
    var secs = 59-now.getSeconds();
    var str = '';
    str += hrs+' hours '+mins+' minutes';
    document.getElementById('countdown').innerHTML = str;
}

var _cntDown;

function StopTimes() {
    clearInterval(_cntDown);
}

Any help is much appreciated! Thanks in advance.

Answer 1

Do you live somewhere that moves clocks forwards/backwards in spring/autumn?

If so, you'll have two days in the year where your hour and minute logic would fail.

Here's a way that works even when the clocks change:

var now = new Date();
var midday = new Date(now.getFullYear(), now.getMonth(), now.getDate() + (now.getHours() >= 12 ? 1 : 0), 12);
var millisToMidday = midday.getTime() - now.getTime();
var hours = Math.floor((millisToMidday / (60 * 60 * 1000)))
var minutes = Math.floor((millisToMidday / (60 * 1000))) % 60;
var seconds = Math.floor((millisToMidday / (1000))) % 60;