JavaScript timer to count down from a certain time for a number of hours

Question

I have created a countdown timer. The problem is, I am wanting it to count down from midnight clock 00:00:00 until clock 17:00:00.

I have made the timer count down starting at 17 hours 00 minutes 00 seconds and it works a treat, but I need a way to take off the time from 00:00:00 to present from the 17 hours.

Here is my JS code

    function startTimer(duration, display) {
    var start = Date.now(),
        diff,
        hours,
        minutes,
        seconds;

    function timer() {
        // get the number of seconds that have elapsed since 
        // startTimer() was called
        diff = duration - (((Date.now() - start) / 1000) | 0);

        // Setting and displaying hours, minutes, seconds
        hours = (diff / 360) | 0;
        minutes = (diff / 60) | 0;
        seconds = (diff % 60) | 0;

        hours = hours < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = hours + ":" + minutes + ":" + seconds;

        if (diff <= 0) {
            // add one second so that the count down starts at the full duration
            // example 17:00:00 not 16:59:59
            start = Date.now() + 1000;
        }
    };
    // don't want to wait a full second before the timer starts
    timer();
    setInterval(timer, 1000);
}
window.onload = function () {
    var timeLeft = 3600 * 17,
        display = document.querySelector('#time');
    startTimer(timeLeft, display);
};

Here is my HTML code:

<div>Order by: <span id="time"></span> for Next Day Delivery.</div>

My thoughts were to get the timeLeft = 3600 * 17 and take off the diff.

Answer 1

Here is your corrected code : it was easier to save the timestamp of 17h of the current day (next day if we are after 17h) and compare it to the current timestamp. And to calculate the number of hours left, you have to divide the number of seconds by 3600 (60*60) and not 360

function startTimer(display) {
    var date = new Date();
    var h17 = new Date(date.getFullYear(), date.getMonth(), date.getDate(), 17);
    if(date.getHours() >= 17) {
        h17.setDate(h17.getDate()+1);
    }
    h17 = h17.getTime();
    var diff,
        hours,
        minutes,
        seconds;
    
    function timer() {
        diff = (((h17 - Date.now()) / 1000) | 0);
        
        // Setting and displaying hours, minutes, seconds
        hours = (diff / 3600) | 0;
        minutes = ((diff % 3600) / 60) | 0;
        seconds = (diff % 60) | 0;
        
        hours = hours < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        
        display.textContent = hours + ":" + minutes + ":" + seconds;
    };
    timer();
    setInterval(timer, 1000);
}
window.onload = function () {
    var timeLeft = 3600 * 17,
        display = document.querySelector('#time');
    startTimer(display);
};

<div>Order by: <span id="time"></span> for Next Day Delivery.</div>

jsFiddle

PS : I didn't test if the function work correctly after 17h but it should