Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: setting Universal Countdown to a daily countdown not a specific date.

  1. #1
    Join Date
    Apr 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default setting Universal Countdown to a daily countdown not a specific date.

    1) Script Title: Universal Countdown Script

    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...lcountdown.htm

    3) Describe problem: I would like to set up Universal Countdown for a daily 24 hour countdown (for example countdown to 5:00pm server time every 24 hours). Any advice would be greatly appreciated. Thanks!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    This worked out in testing here:

    ldate_h.php:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style style="text/css">
    
    .lcdstyle{ /*Example CSS to create LCD countdown look*/
    background-color:black;
    color:lime;
    font: bold 18px MS Sans Serif;
    padding: 3px;
    }
    
    .lcdstyle sup{ /*Example CSS to create LCD countdown look*/
    font-size: 80%
    }
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * Universal Countdown script-  Dynamic Drive (http://www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit http://www.dynamicdrive.com/ for this script and 100s more.
    ***********************************************/
    
    function cdLocalTime(container, servermode, offsetMinutes, targetdate, debugmode){
    if (!document.getElementById || !document.getElementById(container)) return
    this.container=document.getElementById(container)
    var servertimestring=(servermode=="server-php")? '<? print date("F d, Y H:i:s", time())?>' : (servermode=="server-ssi")? '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' : '<%= Now() %>'
    this.localtime=this.serverdate=new Date(servertimestring)
    this.targetdate=new Date(targetdate)
    this.debugmode=(typeof debugmode!="undefined")? 1 : 0
    this.timesup=false
    this.localtime.setTime(this.serverdate.getTime()+offsetMinutes*60*1000) //add user offset to server time
    this.updateTime()
    }
    
    cdLocalTime.prototype.updateTime=function(){
    var thisobj=this
    this.localtime.setSeconds(this.localtime.getSeconds()+1)
    setTimeout(function(){thisobj.updateTime()}, 1000) //update time every second
    }
    
    cdLocalTime.prototype.displaycountdown=function(baseunit, functionref){
    this.baseunit=baseunit
    this.formatresults=functionref
    this.showresults()
    }
    
    cdLocalTime.prototype.showresults=function(){
    var thisobj=this
    var debugstring=(this.debugmode)? "<p style=\"background-color: #FCD6D6; color: black; padding: 5px\"><big>Debug Mode on!</big><br /><b>Current Local time:</b> "+this.localtime.toLocaleString()+"<br />Verify this is the correct current local time, in other words, time zone of count down date.<br /><br /><b>Target Time:</b> "+this.targetdate.toLocaleString()+"<br />Verify this is the date/time you wish to count down to (should be a future date).</p>" : ""
    
    var timediff=(this.targetdate-this.localtime)/1000 //difference btw target date and current date, in seconds
    if (timediff<0){ //if time is up
    this.targetdate.setDate(this.targetdate.getDate()+1)
    }
    var oneMinute=60 //minute unit in seconds
    var oneHour=60*60 //hour unit in seconds
    var oneDay=60*60*24 //day unit in seconds
    var dayfield=Math.floor(timediff/oneDay)
    var hourfield=Math.floor((timediff-dayfield*oneDay)/oneHour)
    var minutefield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour)/oneMinute)
    var secondfield=Math.floor((timediff-dayfield*oneDay-hourfield*oneHour-minutefield*oneMinute))
    if (this.baseunit=="hours"){ //if base unit is hours, set "hourfield" to be topmost level
    hourfield=dayfield*24+hourfield
    dayfield="n/a"
    }
    else if (this.baseunit=="minutes"){ //if base unit is minutes, set "minutefield" to be topmost level
    minutefield=dayfield*24*60+hourfield*60+minutefield
    dayfield=hourfield="n/a"
    }
    else if (this.baseunit=="seconds"){ //if base unit is seconds, set "secondfield" to be topmost level
    var secondfield=timediff
    dayfield=hourfield=minutefield="n/a"
    }
    this.container.innerHTML=debugstring+this.formatresults(dayfield, hourfield, minutefield, secondfield)
    setTimeout(function(){thisobj.showresults()}, 1000) //update results every second
    }
    
    /////CUSTOM FORMAT OUTPUT FUNCTIONS BELOW//////////////////////////////
    
    //Create your own custom format function to pass into cdLocalTime.displaycountdown()
    //Use arguments[0] to access "Days" left
    //Use arguments[1] to access "Hours" left
    //Use arguments[2] to access "Minutes" left
    //Use arguments[3] to access "Seconds" left
    
    //The values of these arguments may change depending on the "baseunit" parameter of cdLocalTime.displaycountdown()
    //For example, if "baseunit" is set to "hours", arguments[0] becomes meaningless and contains "n/a"
    //For example, if "baseunit" is set to "minutes", arguments[0] and arguments[1] become meaningless etc
    
    //1) Display countdown using plain text
    function formatresults(){
    if (this.timesup==false){//if target date/time not yet met
    var displaystring="<span style='background-color: #CFEAFE'>"+arguments[1]+" hours "+arguments[2]+" minutes "+arguments[3]+" seconds</span> left until launch time"
    }
    else{ //else if target date/time met
    var displaystring="Launch time!"
    }
    return displaystring
    }
    
    //2) Display countdown with a stylish LCD look, and display an alert on target date/time
    function formatresults2(){
    if (this.timesup==false){ //if target date/time not yet met
    var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+arguments[1]+" <sup>hours</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> left until 5:00pm server time."
    }
    else{ //else if target date/time met
    var displaystring="" //Don't display any text
    alert("Launch time!") //Instead, perform a custom alert
    }
    return displaystring
    }
    
    </script>
    </head>
    <body>
    <div id="cdcontainer"></div>
    <script type="text/javascript">
    var servermode='server-php'  //Set to server mode
    var targettime='17:00:00'  //Set to target time leave seconds as 00
    var container='cdcontainer'  //Set to name of container
    var offsetMinutes=0  //Set to LocaltimeoffsetMinutes
    /////////////////// Stop Editing ///////////////////
    var servertimestring=(servermode=="server-php")? '<? print date("F d, Y H:i:s", time())?>' : (servermode=="server-ssi")? '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' : '<%= Now() %>'
    var prep=new Date(servertimestring); prep.months=['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    prep.limit=targettime.split(':');
    for (var i_tem = 0; i_tem < prep.limit.length; i_tem++)
    prep.limit[i_tem]=parseInt(prep.limit[i_tem], 10);
    if(prep.getHours()>prep.limit[0]||(prep.getHours()==prep.limit[0]&&prep.getMinutes()>=prep.limit[1]))
    prep.setDate(prep.getDate()+1);
    prep.base=prep.months[prep.getMonth()]+' '+prep.getDate()+', '+prep.getFullYear()+' '+targettime;
    var launchdate=new cdLocalTime(container, servermode, offsetMinutes, prep.base);
    launchdate.displaycountdown("days", formatresults2);
    </script>
    
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for the quick reply John. I was able to set it up however once it reaches the target time it simply resets and starts counting down again instead of performing any action I tried to specify. Ideally I would like a refresh button to appear-

    <FORM>
    <INPUT TYPE="button" onClick="history.go(0)" VALUE="Refresh">
    </FORM>

    but I wasn't successful implementing that in the "function formatresults2()" even with a static target date and time. I just know basic html so I don't really know how to adapt that refresh button so it functions inside the script when the target time is reached. Anything I tried the scipt would simply not load (even during the countdown).

    Also is it possible to have this countdown every 12 hours instead of 24?

    Many thanks to whoever replies!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    I'll have to think about that 12 hour thing, time calculations can be so confusing, even to us so-called experts. However, the place where the script decides what to do when the target time is reached is here:

    Code:
    if (timediff<0){ //if time is up
    this.targetdate.setDate(this.targetdate.getDate()+1)
    }
    In the original script it was:

    Code:
    if (timediff<0){ //if time is up
    this.timesup=true
    this.container.innerHTML=debugstring+this.formatresults()
    return
    }
    I chose to just set ahead to the next day. The original stopped processing and wrote an 'error' message to the container.

    You could put something like so:

    Code:
    if (timediff<0){ //if time is up
    this.container.innerHTML='Time\'s up, hit <input type="button" value="Reset" onclick="window.location.href=window.location.href;"> to reset to the next day.';
    return;
    }
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    OK, thinking is over. To have it work out to a 12 hour interval, first set the target time to its am value:

    Code:
    var targettime='05:00:00'  //Set to AM target time, leave seconds as 00
    Then change this:

    Code:
    if(prep.getHours()>prep.limit[0]||(prep.getHours()==prep.limit[0]&&prep.getMinutes()>=prep.limit[1]))
    prep.setDate(prep.getDate()+1);
    prep.base=prep.months[prep.getMonth()]+' '+prep.getDate()+', '+prep.getFullYear()+' '+targettime;
    to:

    Code:
    if(prep.getHours()>prep.limit[0]||(prep.getHours()==prep.limit[0]&&prep.getMinutes()>=prep.limit[1]))
    prep.limit[0]+=12;
    if(prep.getHours()>prep.limit[0]||(prep.getHours()==prep.limit[0]&&prep.getMinutes()>=prep.limit[1])){
    prep.limit[0]-=12;
    prep.setDate(prep.getDate()+1);
    }
    prep.base=prep.months[prep.getMonth()]+' '+prep.getDate()+', '+prep.getFullYear()+' '+prep.limit[0]+':'+prep.limit[1]+':00';
    Now, I am assuming you are making a change like from my previous post. But, if you wanted to go with the method I set up of automatically starting the count over, you would change:

    Code:
    if (timediff<0){ //if time is up
    this.targetdate.setDate(this.targetdate.getDate()+1)
    }
    to:

    Code:
    if (timediff<0){ //if time is up
    this.targetdate.setHours(this.targetdate.getHours()+12)
    }
    One other change is required (in formatresults2), change:

    Code:
    until 5:00pm server time
    to:

    Code:
    until 5:00"+(this.targetdate.getHours()>=12? 'pm' : 'am')+" server time
    Note: Since you are already limiting the interval to less than a day, you could get rid of this (red) from formatresults2:

    Code:
    var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>days</sup> "+argume . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Apr 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    You da man, John. I happily made a donation to the Ocean Conservancy through your "donate" link. Thanks!

  7. #7
    Join Date
    Jan 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    First let me say this daily timer works perfectly and thank you for the time spent on getting it down.

    I do have a question though... would it be possible to have this adjust the daily timer to skip over the weekend? For example, we will be using it for daily "Order in the next xxh xxm to get yyyyy." The timer is set to reset at 3pm, so Friday at 4pm it will say order in the next 23h (implying that orders placed Sat/Sun will count), even though the "order" day has jumped to Monday.

    I am not intimate enough with the php or java to pull this off, so any insight would be greatly appreciated.

  8. #8
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi John / jscheuer1 ,
    the script from post #2 works great with Firefox, but not with InternetExplorer (example IE 9) or Google Chrome (13). The part of the script between <BODY></BODY> is the part of the Script that dont works:

    ---------------
    <script type="text/javascript">
    var servermode='server-php' //Set to server mode
    var targettime='17:00:00' //Set to target time leave seconds as 00
    var container='cdcontainer' //Set to name of container
    var offsetMinutes=0 //Set to LocaltimeoffsetMinutes
    /////////////////// Stop Editing ///////////////////
    var servertimestring=(servermode=="server-php")? '<? print date("F d, Y H:i:s", time())?>' : (servermode=="server-ssi")? '<!--#config timefmt="%B %d, %Y %H:%M:%S"--><!--#echo var="DATE_LOCAL" -->' : '<%= Now() %>'
    var prep=new Date(servertimestring); prep.months=['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    prep.limit=targettime.split(':');
    for (var i_tem = 0; i_tem < prep.limit.length; i_tem++)
    prep.limit[i_tem]=parseInt(prep.limit[i_tem], 10);
    if(prep.getHours()>prep.limit[0]||(prep.getHours()==prep.limit[0]&&prep.getMinutes()>=prep.limit[1]))
    prep.setDate(prep.getDate()+1);
    prep.base=prep.months[prep.getMonth()]+' '+prep.getDate()+', '+prep.getFullYear()+' '+targettime;
    var launchdate=new cdLocalTime(container, servermode, offsetMinutes, prep.base);
    launchdate.displaycountdown("days", formatresults2);
    </script>
    -----------------

    Please help me, its very, very, very important for me that this wonderfull script runs on IE, Chrome too.

    Thank you my Hero!!
    Stivler

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,373
    Thanks
    77
    Thanked 3,421 Times in 3,382 Posts
    Blog Entries
    12

    Default

    As I couldn't find the original, I copied the code from post #2 to my WAMP server running PHP 5.3.0. It didn't work in any browser. After I changed the two short cut <? tags to <?php tags (my WAMP isn't setup to accept the shortcut tags - this has no effect on browsers, it's an internal PHP setting), it worked fine in all three of the browsers you mentioned.

    So, I'm at a loss as to what the problem could be for you in Chrome and IE.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Jun 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you for your answer, John.

    Can i send you the Link with PN or Email?

Bookmarks

Posting Permissions

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