/    Sign up×
Community /Pin to ProfileBookmark

24Hr Countdown Clock Problem

Hello, I am trying to create a countdown clock to indicate when a webcast begins. It starts at 18:00:00 UTC everyday, and I am comparing this time with the current time UTC. This then sets the timer. I have got an algorithm and coded it, but it doesn’t work, and I can’t debug it. Any help appreciated.
I will follow this post with the algorithm.

to post a comment
JavaScript

17 Comments(s)

Copy linkTweet thisAlerts:
@PhotoDudeauthorMay 26.2008 — Algorithm:

  • 1. Set StartTime as new Date object

  • 2. Convert HH:MM:SS to just Seconds

  • 3. Get Current UTC

  • 4. Convert that to just Seconds

  • 5. Subtract CurrentUTCSeconds from StartTimeUTCSeconds

  • 6. If Difference < 0, then add Difference to 86400 (Seconds in 24Hrs)

  • 7. Else do nothing

  • 8. Convert this into HH:MM:SS

  • 9. Output it.
  • Copy linkTweet thisAlerts:
    @PhotoDudeauthorMay 26.2008 — <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>

    <head>

    <title>Countdown</title>

    <script language="javascript" type="text/javascript">


    //Calculates Time Remaining Until Next Broadcast


    //Defines And Converts Start Time UTC to Seconds

    var StartTimeUTC = new Date();
    var STHours = StartTimeUTC.setHours(18);
    var STMinutes = StartTimeUTC.setMinutes(0);
    var STSeconds = StartTimeUTC.setSeconds(0);

    var STHoursInSeconds = ((parseInt(STHours) * 60) * 60);
    var STMinutesInSeconds = (parseInt(STMinutes) * 60);

    var StartSecondsUTC = (parseInt(STHoursInSeconds) + parseInt(STMinutesInSeconds) + parseInt(STSeconds));


    //Converts Current UTC to Seconds

    var UTCNow = new Date();
    var UTHours = UTCNow.getUTCHours;
    var UTMinutes = UTCNow.getUTCMinutes;
    var UTSeconds = UTCNow.getUTCSeconds;

    var UTHoursInSeconds = ((parseInt(UTHours) * 60) * 60);
    var UTMinutesInSeconds = (parseInt(UTMinutes) * 60);

    var UTCNowSeconds = (parseInt(UTHoursInSeconds) + parseInt(UTMinutesInSeconds) + parseInt(UTSeconds));


    //Calculates Time Difference Between Start And Current Time

    var SecondsDifference = parseInt(StartSecondsUTC) - parseInt(UTCNowSeconds);
    var TimeToGoSeconds;

    if (SecondsDifference < 0); //This Resets The Timer Every 24Hrs! (86400 is the number of seconds in a day)
    {
    TimeToGoSeconds = (86400 + parseInt(SecondsDifference));
    }

    else
    {
    TimeToGoSeconds = SecondsDifference;
    }


    //Re-Converts Time To Go Into HH:MM:SS

    var ReturnToTime = new Date()
    ReturnToTime.setSeconds(TimeToGoSeconds);

    var DisplayHours = ReturnToTime.getHours();
    var DisplayMinutes = ReturnToTime.getMinutes();
    var DisplaySeconds = ReturnToTime.getSeconds();

    if (DisplayHours < 10)
    {
    DisplayHours = "0" + DisplayHours;
    }

    if (DisplayMinutes < 10)
    {
    DisplayMinutes = "0" + DisplayMinutes;
    }

    if (DisplaySeconds < 10)
    {
    DisplaySeconds = "0" + DisplaySeconds;
    }

    var TimeRemainingString = ("Time Until Next Broadcast; " + DisplayHours + ":" + DisplayMinutes + ":" + DisplaySeconds);


    </script>


    </head>



    <body>

    <p>

    <script language="javascript" type="text/javascript">

    document.write("STHours Reads " + STHours);

    document.write("STMinutes Reads " + STMinutes);

    document.write("STSeconds Reads " + STSeconds);


    document.write("UTHours Reads " + UTHours);

    document.write("UTMinutes Reads " + UTMinutes);

    document.write("UTMinutes Reads " + UTMinutes);


    document.write("StartSecondsUTC Reads " + StartSecondsUTC);

    document.write("UTCNowSeconds Reads " + UTCNowSeconds);

    document.write("SecondsDifference Reads " + SecondsDifference);

    document.write("TimeToGoSeconds Reads " + TimeToGoSeconds);

    document.write("TimeRemainingString Reads " + TimeRemainingString);

    </script>

    </p>

    </body>

    </html>
    Copy linkTweet thisAlerts:
    @JMRKERMay 27.2008 — While I have not checked for all conditions, I simplified this a little.


    See if you can make this work for you.
    [code=php]
    <html>
    <HEAD>
    <title>countdown</title>

    <SCRIPT type="text/javascript" LANGUAGE="JavaScript">

    function getTime() {
    now = new Date();

    TZ = 0; // TZ = now.getTimezoneOffset()/60;

    mm = now.getMonth();
    dd = now.getDate();
    yy = now.getFullYear();
    later = new Date(yy,mm,(dd+1),(18+TZ),0,0,0); // later = Date.UTC(yy,mm,(dd+1),18,0,0,0);

    days = (later - now) / 1000 / 60 / 60 / 24;
    daysRound = Math.floor(days);
    if (daysRound < 0) { daysRound += 1; }

    hours = (later - now) / 1000 / 60 / 60 - (24 * daysRound);
    hoursRound = Math.floor(hours);

    minutes = (later - now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
    minutesRound = Math.floor(minutes);
    if (minutesRound < 10) { minutesRound = '0'+minutesRound; }

    seconds = (later - now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
    secondsRound = Math.round(seconds);
    if (secondsRound < 10) { secondsRound = '0'+secondsRound; }

    var str = '';
    // str += daysRound+':';
    str += hoursRound+':'+minutesRound+':'+secondsRound;
    document.getElementById('TimeLeft').innerHTML = '<h4>(Hours : Minutes : Seconds)<br>Show time in: '+str+'</h4>';

    newtime = setTimeout("getTime();", 1000);
    }
    </script>
    </HEAD>

    <BODY onLoad="getTime()">

    <div id="TimeLeft" align="center">
    <h4>(Hours : Minutes : Seconds)</h4>
    </div>

    </body>
    </html>
    [/code]

    Good Luck.
    Copy linkTweet thisAlerts:
    @PhotoDudeauthorMay 27.2008 — I don't get why you are dealing with days and months when it is a repeating 24 hr countdown. You seem to have missed the point. I will test your code now to make sure I am not a dumb-ass.
    Copy linkTweet thisAlerts:
    @PhotoDudeauthorMay 27.2008 — Okay, You seem to have hit the nail on the head, although I don't know how it works!!!! Thanks a lot, it does reset back to 24:00:00? I'm sure it will. Can't beleive how different your code is to mine!
    Copy linkTweet thisAlerts:
    @PhotoDudeauthorMay 27.2008 — Dude you are a genius!
    Copy linkTweet thisAlerts:
    @JMRKERMay 27.2008 — The days code is required because you are really spanning a potential 48 hour period when you want to check at 6pm (1800 hours) -- 24 hours prior and 24 hours past the check time. The days information is not displayed (although it could be), but makes it a lot easier to determine the other values in the calcuations.

    Glad I was able to help.

    Good Luck!
    Copy linkTweet thisAlerts:
    @PhotoDudeauthorMay 27.2008 — Yeah just figured out how it works about 30 minutes ago. My algorithm was okay on it's own but the date system in javascript doesn't work the way a "straight" language like C++ does. I needed a very different approach to handling that object. Next, the navigation... oh joy.
    Copy linkTweet thisAlerts:
    @PhotoDudeauthorMay 27.2008 — OK, Follow up. Your code seems to not be running in UTC. I need the start time to be 18:00:00 UTC, I am currently in British Daylight Saving (BST) and your code points to 18:00:00 BST. It should bypass the issue by directly getting UTC. I need to work this, but feel that it will probably take someone with a better knowledge of javascript.
    Copy linkTweet thisAlerts:
    @JMRKERMay 27.2008 — I'm sure you (or we) can figure it out. How close to GMT is BST? I'm over the pond in Florida and we are on EST (currently not on Daylight Saving). From what I know, it is near 5pm (1700 hours here) on Tuesday, so if you are in the United Kingdom, it should be +6 hours ahead making it 11pm (2300 hours)

    I left some UTC and Time Zone (TZ) coding in the posting but commented it out at the last minute (pun intended).


    Perhaps you can use them again to suit your needs.

    To start with some definitions to work with, can you fill in this information for me?

    Midnight GMT (0000 hours) = ??? BST = 6pm (1800 EST)

    Noon GMT (1200 hours) = ??? BST = 6am (0600 EST)

    And 1800 hours should be 6:00 pm, correct? Probably using the GMT with the getTimeoffset() function for the local computer should allow us to adjust the countdown clock for the particular area. You can test some of this by setting your computer clock different from the current time just to make sure your code is working out OK.

    Let us know what you come up with!
    Copy linkTweet thisAlerts:
    @JMRKERMay 27.2008 — ... (currently not on Daylight Saving)...[/quote]
    Whoops. My wife has corrected me ... again ... we ARE currently on Daylight Saving Time.

    I guess I missed the spring ahead part. ?

    All else in post stays the same, ie UK is +6 hours ahead of east coast of USA.

    (unless I'm wrong ... again) ?
    Copy linkTweet thisAlerts:
    @PhotoDudeauthorMay 28.2008 — 18:00:00 UTC = 18:00:00 GMT = 19:00:00 BST or 7 'o'clock.
    Copy linkTweet thisAlerts:
    @PhotoDudeauthorMay 28.2008 — Fixed it.

    Substitute "later = new Date(yy,mm,(dd+1),(18+TZ),0,0,0);"

    For "later = Date.UTC(yy,mm,(dd+1),18,0,0,0);"

    Just like you coded!!!
    Copy linkTweet thisAlerts:
    @JMRKERMay 28.2008 — Great! I knew you could do it.

    Send a link when done and I'll check it out over here. Stay in touch.
    Copy linkTweet thisAlerts:
    @PhotoDudeauthorMay 29.2008 — Sure will. Website goes live next week. Thanks again.
    Copy linkTweet thisAlerts:
    @JMRKERMay 30.2008 — You're most welcome and Good Luck!
    Copy linkTweet thisAlerts:
    @PhotoDudeauthorJun 03.2008 — Here is my final version to make a 24Hr countdown for a webcast, that also tells you when the wecast is is progress.


    //Countdown Timer Script

    function getCountdown()
    {
    var CountdownString;

    Now = new Date();
    TZ = 0;

    mm = Now.getMonth();
    dd = Now.getDate();
    yy = Now.getFullYear();

    Start = Date.UTC(yy,mm,(dd+1),18,0,0,0);



    days = (Start - Now) / 1000 / 60 / 60 / 24;
    daysRound = Math.floor(days);

    if (daysRound < 0)
    {
    daysRound += 1;
    }

    hours = (Start - Now) / 1000 / 60 / 60 - (24 * daysRound);
    hoursRound = Math.floor(hours);
    if (hoursRound < 10)
    {
    hoursRound= '0'+ hoursRound;
    }

    minutes = (Start - Now) / 1000 /60 - (24 * 60 * daysRound) - (60 * hoursRound);
    minutesRound = Math.floor(minutes);
    if (minutesRound < 10)
    {
    minutesRound = '0'+ minutesRound;
    }

    seconds = (Start - Now) / 1000 - (24 * 60 * 60 * daysRound) - (60 * 60 * hoursRound) - (60 * minutesRound);
    secondsRound = Math.round(seconds);
    if (secondsRound < 10)
    {
    secondsRound = '0' + secondsRound;
    }





    if ( hoursRound >= 16 && hoursRound < 24 )
    {
    CountdownString = ("Broadcasting Now!");
    }
    else
    {
    CountdownString = ("Next Webcast Starts In: " + hoursRound + ":" + minutesRound + ":" + secondsRound + " Hrs");
    }


    document.getElementById('Countdown').innerHTML = CountdownString;

    newtime = setTimeout("getCountdown();", 1000);
    }
    ×

    Success!

    Help @PhotoDude spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 BETA 6.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @nearjob,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,

    tipper: @meenaratha,
    tipped: article
    amount: 1000 SATS,
    )...