Ensure JavaScript countdown clock does not count beyond 59 seconds/minutes

Report
Question

Please briefly explain why you feel this question should be reported .

Report Cancel

My apologies if a similar question has been asked before – I could not find it on SO.

I’ve constructed a countdown clock in pure JS that will countdown opening times (different for Fri,Sat,Sund and the remaining weekdays). I have also offset the AEST timezone so that the time is constant no matter what internet connected device you are accessing in whatever timezone.

Works great! Although I’m working to streamline the code of course. Small bug I noticed this morning is that it likes to count down from 60secs and 60min instead of having them converted to the next unit of time up. (i.e. when the countdown started this morning at 10am to count down until 5pm, it began with 6 hours, 60 mins – definitely should be 7 hours!).

Anwyay, this is my code:

function ShowTime() {
    //access system clock and get the time
    var aest = new Date();
    var localTime = aest.getTime();

    //obtain local UTC offset and convert to msec
    var localOffset = aest.getTimezoneOffset()*60000;

    //Get total UTC time in msec
    var utc = localTime + localOffset;
    //obtain and add destination UTC time offset (Brisbane, Australia +10)
    var offset = 10;
    var brisbane = utc + (3600000*offset);
    var brisDay = new Date(brisbane);
    brisDay = brisDay.getDay();
    //Set weekend days with different opening hours
    //Set numbers representing weekend days - 0 for Sunday, 6 for Saturday
    if (brisDay===0 || brisDay===5 || brisDay===6) {
        var hoursBase = 16
        var hoursBefore = 6;
    }
    else {
        var hoursBase = 19;
        var hoursBefore = 9;
    }

    //convert msec value (with timezone offset) to datetime string variables
    var consTime = new Date(brisbane);
    var brisHours = hoursBase-consTime.getHours();
    var brisMinutes = 60-consTime.getMinutes();
    var brisSec = 60-consTime.getSeconds();

    //complete string for offset AEST local time
    //show CLOSED message if past closing time
    if (brisHours<0 || brisHours>hoursBefore) {
    var timeLeft = "<strong style='background-image:url()'>The SLQ building is currently closed.</strong>";
    } else if (brisHours<1 || brisHours>hoursBefore) {
        var timeLeft = "SLQ will be open for another<br /><strong>" +brisHours+' hrs '+brisMinutes+' min '+brisSec+' sec'+ "</strong> today";
    } else if (brisHours<2 || brisHours>hoursBefore) {
        var timeLeft = "SLQ will be open for another<br /><strong>" +brisHours+' hrs '+brisMinutes+' min '+brisSec+' sec'+ "</strong> today";
    } else if (brisHours<3 || brisHours>hoursBefore) {
        var timeLeft = "SLQ will be open for another<br /><strong>" +brisHours+' hrs '+brisMinutes+' min '+brisSec+' sec'+ "</strong> today";
    }
        else {
    var timeLeft = "SLQ will be open for another<br /><strong>" +brisHours+' hrs '+brisMinutes+' min '+brisSec+' sec'+ "</strong> today";
    }

    //output adjusted time into page
    document.getElementById("countdown").innerHTML = timeLeft;
}

//Setup variable to update on setInterval function every 1000 milliseconds
var countdown = setInterval(ShowTime ,1000);

and here is a working JS Fiddle: https://jsfiddle.net/coolwebs/pbno1jhe/1/

I have looked into the problem and it appears as though my issue lies in the fact that I have set the

var brisMinutes = 60-consTime.getMinutes();
var brisSec = 60-consTime.getSeconds();

When I change these numeric values to be “59” – like I have in the provided JS Fiddle – it seems to resolve the issue but also appears to be slightly out of sync with the computer clock.

I think I have approached it incorrectly, so could someone please give me their opinion on the matter?

0
0 Answer 4 views 0