Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need countdown timer to reset daily

    Using the following script:

    <script language="JavaScript">TargetDate = "01/22/2010 7:50 AM UTC-0500";
    BackColor = "palegreen";
    ForeColor = "navy";
    CountActive = true;
    CountStepper = -1;
    LeadingZero = true;
    DisplayFormat = "%%D%% Days, %%H%% Hours, %%M%% Minutes, %%S%% Seconds.";
    FinishMessage = "Call In Now!!! Lines Are Open"
    </script>

    Want target date to equal every day so it resets after the target date and time is hit. Optionally, it would be nice to have it reset 60 minutes after target is hit (so the FinishMessage can display) but if that's too complicated, I'd be happy to not have to manually reset the date every day. I apologize in advance for being a newbie and this may be a straight-forward and simple issue.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Here you are:-
    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    
    function getSeconds() {
    var now = new Date();
    var time = now.getTime();  // time now in milliseconds
    var midnight = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0); // midnight 0000 hrs
    // midnight - change time hh,mm,ss to whatever time required, e.g. 7,50,0 (0750)
    var ft = midnight.getTime() + 86400000;  // add one day
    var diff = ft - time;  
    diff = parseInt(diff/1000);
    if (diff > 86400) {diff = diff - 86400}
    startTimer (diff);
    }
    
    
    var timeInSecs;
    var ticker;
    
    function startTimer(secs){
    timeInSecs = parseInt(secs);
    ticker = setInterval("tick()",1000); 
    tick(); // to start counter display right away
    }
    
    function tick() {
    var secs = timeInSecs;
    if (secs>0) {
    timeInSecs--;
    }
    else {
    clearInterval(ticker); // stop counting at zero
    //getSeconds();  // and start again if required
    }
    
    var hours= Math.floor(secs/3600);
    secs %= 3600;
    var mins = Math.floor(secs/60);
    secs %= 60;
    var result = ((hours < 10 ) ? "0" : "" ) + hours + " hours " + ( (mins < 10) ? "0" : "" ) + mins
                      + " minutes " + ( (secs < 10) ? "0" : "" ) + secs + " seconds";
    document.getElementById("countdown").innerHTML = "The next update of this site will be in " + result;
    }
    
    
    </script>
    
    </head>
    
    <body onload = "getSeconds()">
    
    <span id="countdown" style="font-weight: bold;"></span>
    
    </body>
    </html>
    Bear in mind that the accuracy of the time displayed depends on the accuracy of the user's browser clock.

    I am afraid that I do not understand the bit about resetting 60 minutes after the target time and the Finish Message.

    Illiterate? Write today for free help. - Government leaflet.
    Last edited by Philip M; 01-21-2010 at 04:52 PM.

  • Users who have thanked Philip M for this post:

    Gracyon (02-26-2010)

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Thanks

    Let me work with that. This is a big help!

  • #4
    ksk
    ksk is offline
    New to the CF scene
    Join Date
    Feb 2010
    Posts
    1
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Mr. Philip thank you for providing this countdown,
    however this will be countdown from user/guest time right? not server time?
    if its possible, can you change it into server time?
    so everytime user refresh a page its always show minutes/seconds left to 00:00(server time)
    thank you very much mr Philip.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by ksk View Post
    however this will be countdown from user/guest time right? not server time?
    Yes, the time as shown by the user's computer.

    Quote Originally Posted by ksk View Post
    if its possible, can you change it into server time?
    No, Javascript is purely a client-side language which cannot communicate with the server. You need server-side scripting, or at least you must obtain the time from the server.
    Last edited by Philip M; 02-20-2010 at 05:33 PM.

  • Users who have thanked Philip M for this post:

    ksk (02-20-2010)

  • #6
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Philip M View Post
    Yes, the time as shown by the user's computer.

    No, Javascript is purely a client-side language which cannot communicate with the server. You need server-side scripting, or at least you must obtain the time from the server.
    Philip, I happen to be looking for something very similar to this as well... However, I would also need it to be based on server time.

    I have a daily event during the month of March, that will always happen at noon, Eastern Standard Time. I would like to put a countdown timer on my php based site that displays (like this one you created) a countdown to the next instance of noon.

    I found this guy who uses php and js to get the job done. However, I'm more interested in your script that resets every day. Here is the guy's blog post about his countdown clock: counddownclock

    How do I merge his concept with your daily countdown clock?

    Thank you so much in advanced.

    Gracyon

  • #7
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by Gracyon View Post
    How do I merge his concept with your daily countdown clock?
    Suggest you post your enquiry in the PHP forum for the exact PHP syntax.

    Something like:-

    Code:
    <script type = "text/javascript">
    var time = "<? echo time(); ?>  // php timestamp
    </script>
    Last edited by Philip M; 02-26-2010 at 07:13 PM.

  • #8
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Will do! Thanks!

  • #9
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you for this timer! It works awesome! How do I set the clock to CST? Or UTC/GMT?

  • #10
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Have a look at http://www.javascriptkit.com/jsref/date.shtml
    where you will see a full explanation of the Javascript Date object.

    Look especially at getTimezoneOffset() and getUTCHours()

    Bear in mind that the accuracy of the time displayed depends on the accuracy of the user's browser clock.
    Last edited by Philip M; 01-21-2012 at 08:57 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #11
    New to the CF scene
    Join Date
    Sep 2012
    Location
    Denmark
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi,

    This is fantastic!
    I want to use this as a countdown for delivery time!!

    Since the postman don't work on weekends (lazy dude). :-)

    I want to edit the countdown here to work ever workday with a cut off time at 15:59:59
    But every Friday after 16:00:00 it would say "Monday at 16"
    When sunday midnight, it would reset to countdown to 15:59:59 (normal)

    Anybody can help!!?

    If there can be added some sort of check (easy to deactivate)
    Like only show countdown if let's say a product is in stock.
    On the countdown can take holidays into account

  • #12
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,730
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by Netz View Post
    Hi,

    This is fantastic!
    I want to use this as a countdown for delivery time!!

    Since the postman don't work on weekends (lazy dude). :-)

    I want to edit the countdown here to work ever workday with a cut off time at 15:59:59
    But every Friday after 16:00:00 it would say "Monday at 16"
    When sunday midnight, it would reset to countdown to 15:59:59 (normal)

    Anybody can help!!?

    If there can be added some sort of check (easy to deactivate)
    Like only show countdown if let's say a product is in stock.
    On the countdown can take holidays into account
    This requires server-side coding if it is to relate to some product in stock. You should note that this forum is not a free coding service. As a general rule, the people helping out in this forum don't write code for others (especially code that appears to be for commercial applications), but try to help with fixing code that doesn't work. You may perhaps get someone to write this script for you, but you'll be far more likely to get help if you have made a substantial effort and written some code yourself. Then someone here will almost certainly help you correct/improve your work.

    Hint: in Javascript the days of the week are 0-6. So if the day is 0 (Sunday) or 6 (Saturday), or day 5 (Friday) after 1600, you will display the message instead of the countdown.
    Last edited by Philip M; 09-01-2012 at 05:56 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •