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

**droog** · 04-29-2007, 05:37 PM

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!

**jscheuer1** · 04-29-2007, 07:36 PM

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>

**droog** · 04-29-2007, 11:15 PM

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!

**jscheuer1** · 04-30-2007, 02:17 AM

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;
}

**jscheuer1** · 04-30-2007, 05:04 AM

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 . . .

**droog** · 04-30-2007, 05:40 PM

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

**tittles** · 01-20-2010, 01:42 AM

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.

**Stivler** · 06-26-2012, 03:56 PM

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")? '' : '<%= 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

**jscheuer1** · 06-27-2012, 12:14 AM

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.

**Stivler** · 06-27-2012, 12:04 PM

Thank you for your answer, John.

Can i send you the Link with PN or Email?

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

Thread Tools

Search Thread

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

Bookmarks

Bookmarks

Posting Permissions