...

View Full Version : Multiple countdown timers



Driven
10-03-2008, 03:51 AM
Hello all,

It's my first post. I have 0 javascript knowledge and desperately need your help.

I need 5 countdown timers on my html site. I would like them to countdown from different minutes (i.e. 2:30, 5:15, 1:20, etc).

Here is the script I found online:


<!--countdown timer -->
<div style="position:absolute; overflow:hidden; left:107px; top:390px; width:40px; height:20px; z-index:18">
<script language="JavaScript">
TargetDate = new Date().valueOf() + 2*60000 + 30*1000;
BackColor = "#FFFFFF";
ForeColor = "#FF6633";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%M%%:%%S%%";
FinishMessage = "SOLD!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
</div>

I pasted them in the div tags and it works perfectly. However, when I copy and paste them 4 times for a total of 5 timers to display, only 1 shows.

Why is this happening and how can I fix it?

Here is how I it looks on my index file after I pasted it 4 times:

<div id="count1" style="position:absolute; overflow:hidden; left:107px; top:390px; width:45px; height:20px; z-index:29">
<script language="JavaScript">
TargetDate = new Date().valueOf() + 2*60000 + 30*1000;
BackColor = "#FFFFFF";
ForeColor = "#FF6633";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%M%%:%%S%%";
FinishMessage = "SOLD!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
</div>

<div id="count2" style="position:absolute; overflow:hidden; left:257px; top:390px; width:45px; height:20px; z-index:30">
<script language="JavaScript">
TargetDate = new Date().valueOf() + 2*60000 + 30*1000;
BackColor = "#FFFFFF";
ForeColor = "#FF6633";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%M%%:%%S%%";
FinishMessage = "SOLD!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
</div>

<div id="count3" style="position:absolute; overflow:hidden; left:257px; top:390px; width:45px; height:20px; z-index:31">
<script language="JavaScript">
TargetDate = new Date().valueOf() + 2*60000 + 30*1000;
BackColor = "#FFFFFF";
ForeColor = "#FF6633";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%M%%:%%S%%";
FinishMessage = "SOLD!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
</div>

<div id="count4" style="position:absolute; overflow:hidden; left:257px; top:390px; width:45px; height:20px; z-index:32">
<script language="JavaScript">
TargetDate = new Date().valueOf() + 2*60000 + 30*1000;
BackColor = "#FFFFFF";
ForeColor = "#FF6633";
CountActive = true;
CountStepper = -1;
LeadingZero = true;
DisplayFormat = "%%M%%:%%S%%";
FinishMessage = "SOLD!";
</script>
<script language="JavaScript" src="http://scripts.hashemian.com/js/countdown.js"></script>
</div>


Please help!!

Sincerely,
George

vwphillips
10-03-2008, 02:11 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function zxcDHMS(zxcsecs,zxcd,zxcp,zxc0){
zxcsecs=((Math.floor(zxcsecs/zxcd))%zxcp);
return zxcsecs>9?zxcsecs:'0'+zxcsecs;
}

function zxcCountDown(zxcid,zxcmess,zxcsecs,zxcmins,zxchrs,zxcdays){
var zxcobj=document.getElementById(zxcid);
var zxcoop=zxcobj.oop
if (!zxcoop) zxcobj.oop=new zxcCountDownOOP(zxcobj,zxcmess,zxcsecs,zxcmins,zxchrs,zxcdays);
else {
clearTimeout(zxcoop.to);
zxcoop.mess=zxcmess;
zxcoop.mhd=[zxcmins,zxchrs,zxcdays];
zxcoop.srt=new Date().getTime();
zxcoop.fin=new Date().getTime()+((zxcdays||0)*86400)+((zxchrs||0)*3600)+((zxcmins||0)*60)+((zxcsecs||0));
zxcoop.end=((zxcoop.fin-zxcoop.srt));
zxcoop.to=null;
zxcoop.cng();
}
}

function zxcCountDownOOP(zxcobj,zxcmess,zxcsecs,zxcmins,zxchrs,zxcdays){
this.obj=zxcobj;
this.mess=zxcmess;
this.mhd=[zxcmins,zxchrs,zxcdays];
this.srt=new Date().getTime();
this.fin=new Date().getTime()+((zxcdays||0)*86400)+((zxchrs||0)*3600)+((zxcmins||0)*60)+((zxcsecs||0));
this.end=((this.fin-this.srt));
this.to=null;
this.cng();
}

zxcCountDownOOP.prototype.cng=function(){
var zxcnow=new Date().getTime();
if (this.end-Math.floor((zxcnow-this.fin)/1000)>0){
var zxcsecs=this.end-Math.floor((zxcnow-this.fin)/1000)-1;
this.obj.innerHTML=(this.mhd[2]?zxcDHMS(zxcsecs,86400,100000)+' days ':'')+(this.mhd[1]||this.mhd[2]?zxcDHMS(zxcsecs,3600,24)+' hours ':'')+(this.mhd[0]||this.mhd[1]||this.mhd[2]?zxcDHMS(zxcsecs,60,24)+' minutes ':'')+zxcDHMS(zxcsecs,1,60)+' seconds';
this.to=setTimeout(function(zxcoop){return function(){zxcoop.cng();}}(this),1000);
}
else this.obj.innerHTML=this.mess||'';
}
/*]]>*/
</script></head>

<body onload="zxcCountDown('tst','message',20);zxcCountDown('tst1','message 1',20,1);">

<span id="tst" ></span>
<br />
<span id="tst1" ></span>
<input type="button" name="" value="REStart" onclick="zxcCountDown('tst1','message 2',10);"/>

</body>

</html>

Driven
10-04-2008, 04:08 AM
Vic,

THANK YOU SOOOOOOOOOOO MUCH!!!

I see that your a believer!! I am too. Obviously God was using my friend! Thank you sincerely and I pray blessing upon your life!

Thank you again,
George

final60
05-19-2009, 04:42 PM
Hey

How do you edit this code to have the multiple timers but without reseting the count down when the page is reloaded?

thanks

Philip M
05-19-2009, 04:57 PM
Re-loading the page

<body onload="zxcCountDown('tst','message',50);zxcCountDown('tst1','message 1',55,1);">

necessarily starts the scripts running again and re-sets the starting times.

chunk
03-25-2011, 08:07 AM
Re-loading the page

<body onload="zxcCountDown('tst','message',50);zxcCountDown('tst1','message 1',55,1);">

necessarily starts the scripts running again and re-sets the starting times.
hi
i need this script badly but it shows incorrect output when i add hours parameter in it



<body onload="zxcCountDown('tst','message',50);zxcCountDown('tst1','message 1',55,1,3);">


pls help me i need this script badly pls tell me what im doing wrong in calling this function

Old Pedant
03-25-2011, 08:18 AM
There's a goof in his code:


zxcoop.fin=new Date().getTime()+((zxcdays||0)*86400)+((zxchrs||0)*3600)+((zxcmins||0)*60)+((zxcsecs||0));

He is adding *seconds* to the getTime(), but getTime() returns a time in *MILLIseconds*.

Since he later divides by 1000 when calculating with that "fin" value, clearly he intended it to be milliseconds.

So try this:

zxcoop.fin = new Date().getTime()
+ 1000 * ((zxcdays||0)*86400)+((zxchrs||0)*3600)+((zxcmins||0)*60)+((zxcsecs||0));

Same bug in the zxcCountDownOOP function, by the by.

chunk
03-25-2011, 11:16 AM
There's a goof in his code:


zxcoop.fin=new Date().getTime()+((zxcdays||0)*86400)+((zxchrs||0)*3600)+((zxcmins||0)*60)+((zxcsecs||0));

He is adding *seconds* to the getTime(), but getTime() returns a time in *MILLIseconds*.

Since he later divides by 1000 when calculating with that "fin" value, clearly he intended it to be milliseconds.

So try this:

zxcoop.fin = new Date().getTime()
+ 1000 * ((zxcdays||0)*86400)+((zxchrs||0)*3600)+((zxcmins||0)*60)+((zxcsecs||0));

Same bug in the zxcCountDownOOP function, by the by.

hi thanks for the reply but

it still give the incorrect seconds results im calling the function like



<body onload="zxcCountDown('tst','message',20);zxcCountDown('tst1','message 1',20,11,4);">



but the Seconds starts from 35 instead of 20 :(

Old Pedant
03-25-2011, 08:59 PM
Dunno. That's VWPhillip's code. He is still active here. Maybe PM him and ask for clarification?

That's the bug I saw, but there could be others.

chunk
03-25-2011, 10:16 PM
Dunno. That's VWPhillip's code. He is still active here. Maybe PM him and ask for clarification?

That's the bug I saw, but there could be others.

Hi Pedant,
thanks for the reply, I have PMd him as discussed, this code works like a charm. It could be a tiny bug

vwphillips
03-26-2011, 02:20 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcCountDown(id,mess,secs,mins,hrs,days){
var obj=document.getElementById(id);
var oop=obj.oop
if (!oop) obj.oop=new zxcCountDownOOP(obj,mess,secs,mins,hrs,days);
else {
clearTimeout(oop.to);
oop.mess=mess;
oop.mhd=[mins,hrs,days];
oop.srt=new Date().getTime();
oop.fin=new Date().getTime()+((days||0)*86400)+((hrs||0)*3600)+((mins||0)*60)+((secs||0));
oop.end=((oop.fin-oop.srt));
oop.to=null;
oop.cng();
}
}

function zxcCountDownOOP(obj,mess,secs,mins,hrs,days){
this.obj=obj;
this.mess=mess;
this.mhd=[mins,hrs,days];
var date=new Date();
this.fin=new Date(date.getFullYear(),date.getMonth(),date.getDate()+(days||0),date.getHours()+(hrs||0),date.getMi nutes()+(mins||0),date.getSeconds()+(secs||0));
this.to=null;
this.cng();
}

zxcCountDownOOP.prototype.cng=function(){
var now=new Date(),s=(this.fin-now)/1000+1,d=Math.floor(s/60/60/24),h=Math.floor(s/60/60-d*24),m=Math.floor(s/60-h*60-d*24*60),s=Math.floor(s-m*60-h*3600-d*24*60*60);
if (this.fin-now>-500){
this.obj.innerHTML=(this.mhd[2]?(d>9?d:'0'+d)+' days ':'')+(this.mhd[1]||this.mhd[2]?(h>9?h:'0'+h)+' hours ':'')+(this.mhd[0]||this.mhd[1]||this.mhd[2]?(m>9?m:'0'+m)+' minutes ':'')+(s>9?s:'0'+s)+' seconds';
this.to=setTimeout(function(oop){ return function(){ oop.cng(); }}(this),1000);
}
else {
this.obj.innerHTML=this.mess||'';
}
}

/*]]>*/
</script></head>

<body onload="zxcCountDown('tst','message',20); zxcCountDown('tst1','message 1',0,0,2,0);">

<span id="tst" ></span>
<br />
<span id="tst1" ></span>
</body>

</html>

chunk
03-26-2011, 08:00 PM
Thank you so much phillips
thanks a lot for the great help :-)

vwphillips
03-27-2011, 10:32 AM
corrected to allow restart


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcCountDown(id,mess,secs,mins,hrs,days){
var obj=document.getElementById(id);
var oop=obj.oop
if (!oop){
obj.oop=new zxcCountDownOOP(obj);
}
obj.oop.start(mess,secs,mins,hrs,days);
}

function zxcCountDownOOP(obj,mess){
this.obj=obj;
this.to=null;
}

zxcCountDownOOP.prototype={

start:function(mess,secs,mins,hrs,days){
clearTimeout(this.to);
this.mess=mess;
this.mhd=[mins,hrs,days];
var date=new Date();
this.fin=new Date(date.getFullYear(),date.getMonth(),date.getDate()+(days||0),date.getHours()+(hrs||0),date.getMi nutes()+(mins||0),date.getSeconds()+(secs||0));
this.cng();
},

cng:function(){
var now=new Date(),s=(this.fin-now)/1000+1,d=Math.floor(s/60/60/24),h=Math.floor(s/60/60-d*24),m=Math.floor(s/60-h*60-d*24*60),s=Math.floor(s-m*60-h*3600-d*24*60*60);
if (this.fin-now>-500){
this.obj.innerHTML=(this.mhd[2]?(d>9?d:'0'+d)+' days ':'')+(this.mhd[1]||this.mhd[2]?(h>9?h:'0'+h)+' hours ':'')+(this.mhd[0]||this.mhd[1]||this.mhd[2]?(m>9?m:'0'+m)+' minutes ':'')+(s>9?s:'0'+s)+' seconds';
this.to=setTimeout(function(oop){ return function(){ oop.cng(); }}(this),1000);
}
else if (this.mess){
this.obj.innerHTML=this.mess;
}
}

}

/*]]>*/
</script></head>

<body onload="zxcCountDown('tst','message',20); zxcCountDown('tst1','message 1',0,0,2,0);">

<span id="tst" ></span> <input type="button" name="" value="Re-Start" onmouseup="zxcCountDown('tst','message',20);"/>
<br />
<span id="tst1" ></span>
</body>

</html>

chunk
03-28-2011, 08:32 AM
Thank you so much for the great help,
everyone pls note here when u call the function then call it like



zxcCountDown('tst1','message 1',20,11,4);


because when using it inside php calling more than 1 time in one page you might call the function like



zxcCountDown('tst1','message 1','20','11','4');


do not use Single or Double on the secs, mind, hours, days parameter it will give incorrect output, So call without Quotes

Old Pedant
03-28-2011, 08:37 AM
Even in PHP, that's a mistake. You shouldn't put quote marks around numbers.

It happens to work in PHP (and sometimes in JavaScript) because both languages *will* convert a string to a number for you if they can figure out that's what you meant to have happen.

But sometimes, even PHP can't tell what you meant and can get it wrong.

It happens more often in JavaScript because in JS the + operator is used *both* for arithmetic (addition) and for string concatenation. In PHP, you use a period to concatenate strings so there's no confusion when using something like

"3" + "72"

PHP *will* convert the strings to numbers and do addition. JavaScript would string concatenate and give you "372".

Anyway, every time you use a string where a number is meant, you cause the language (either language) to do a string-to-number conversion, and that's actually a pretty slow process. So avoid it when you can.

EDIT: By the by, in JavaScript, if you do
"3" * "7"even JS will convert the strings to numbers and do multiplication. For the most part, it's only + that causes problems.

customnames
10-18-2011, 05:07 PM
I have tried to capture the message into a text box
Like when it hits zero
Having no luck does anyone have some insight
Thanks

vwphillips
10-18-2011, 06:05 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcCountDown(id,mess,secs,mins,hrs,days){
var obj=document.getElementById(id);
var oop=obj.oop
if (!oop){
obj.oop=new zxcCountDownOOP(obj);
}
obj.oop.start(mess,secs,mins,hrs,days);
}

function zxcCountDownOOP(obj,mess){
this.obj=obj;
this.to=null;
}

zxcCountDownOOP.prototype={

start:function(mess,secs,mins,hrs,days){
clearTimeout(this.to);
this.mess=mess;
this.mhd=[mins,hrs,days];
var date=new Date();
this.fin=new Date(date.getFullYear(),date.getMonth(),date.getDate()+(days||0),date.getHours()+(hrs||0),date.getMi nutes()+(mins||0),date.getSeconds()+(secs||0));
this.cng();
},

cng:function(){
var now=new Date(),s=(this.fin-now)/1000+1,d=Math.floor(s/60/60/24),h=Math.floor(s/60/60-d*24),m=Math.floor(s/60-h*60-d*24*60),s=Math.floor(s-m*60-h*3600-d*24*60*60);
if (this.fin-now>-500){
this.obj[this.obj.nodeName.toUpperCase()=='INPUT'?'value':'innerHTML']=(this.mhd[2]?(d>9?d:'0'+d)+' days ':'')+(this.mhd[1]||this.mhd[2]?(h>9?h:'0'+h)+' hours ':'')+(this.mhd[0]||this.mhd[1]||this.mhd[2]?(m>9?m:'0'+m)+' minutes ':'')+(s>9?s:'0'+s)+' seconds';
this.to=setTimeout(function(oop){ return function(){ oop.cng(); }}(this),1000);
}
else if (this.mess){
this.obj[this.obj.nodeName.toUpperCase()=='INPUT'?'value':'innerHTML']=this.mess;
}
}

}

/*]]>*/
</script></head>

<body onload="zxcCountDown('tst','message',20); zxcCountDown('tst1','message 1',0,0,2,0);">

<span id="tst" ></span> <input type="button" name="" value="Re-Start" onmouseup="zxcCountDown('tst','message',20);"/>
<br />
<input id="tst1" />
</body>

</html>

Quicknation
11-18-2011, 11:10 AM
Hi.
I'm an absolute newbie to JavaScript and were looking around for a script that makes it possible to integrate a various number of counters on the same page. So I finaly found this article - great!!!

But now I couldn't check all the values from my mysql in the header-section to fill the <body onload="..."> so this script might be a little modified. Can you please tell me a way how I can do this modifications?

What I need is a simple countdown that can be used on several <span>'s (each with an individual id (sometimes there will be one counter on this page, othertimes maybe 3 or 4 - or more). From the database i do recieve the timestamt until the action is running (like: 1321658342). Something like:

<span id='countdown(n)'>thal also transfers the action / message (like a link).

After the counter reaches "0" / the time it should show a link (also individual to each countdown): I tried it with this script like:

<body onload="zxcCountDown('tst','message',20); zxcCountDown('tst2','<a href=\'http://www.auge3.com\'>my page</a>',20,1,0,6);">

There is no need for a reset of one counter, so maybe this could be the main part getting the <script>-part down into the <body>-part.

Hope you can help me... Many thanks in advance...

Pepin
11-21-2011, 05:45 AM
Hi,

I am looking for the oppsite, a multiple countup or age timer within a html page (using javascript). I want to display below each child picture the age clock/counter of the child. I do not know javascript well (I recognize some code) and know a little of html. I have searched on internet and nothing seems to get close to the below functionality. There are plenty of countup counters etc, but mostly count days, and those that do count age are single use only. Below is some code my friend found. That code works for one person/age only and includes weeks. The thing is that I want one page with all the children listed.

Example of Expected Outcome:

Picture John born in Thailand
John is 10 years, 03 months, 16 days, 12 hours, 14 minutes, 03 seconds old.

Picture Mary born in Florida, USA
Mary is 8 months, 12 days, 14 hours, 02 minutes, 53 seconds old.

Picture Chris born in Melbourne, Australia
Chris is 04 years, 02 months, 03 days, 01 hours, 06 minutes, 12 seconds old.

Picture Lindy born in The Netherlands
Lindy is 03 years, 11 months, 24 days, 23 hours, 44 minutes, 23 seconds old.

And the clocks keep ticking and counting up.

Please note that since Mary is less than a year old, the 0 year value does not show.

I also would like the possibility to consider the time differences between the places they were born and the time zone the web page viewer is in. Is that possible? Or maybe I have to recalculate their GMT (Greenwhich time zone) birth time for that to work, or maybe the time zone of the server? How can we make that accurate?

The hours, minutes, and seconds, would be great, but is of course optional. The code below also shows weeks, which is up to you to use or not. Maybe the script can allow you to choose which values to show?

I would like this for at least four children, but the possibility to add more later by copying some code would be great.

This is not an online form, so all time/date of birth details can be set in the script.

Here is the script I found:

<!-- Copy and Paste into HEAD of HTML-->

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

function ElapsedTime(inFromDate,inToDate) {
var inFromDate = (arguments.length == 0) ? new Date() : arguments[0];
var inToDate = (arguments.length == 1) ? new Date() : arguments[1];

// if (arguments.length == 0) var inFromDate = new Date(); // IE4 has a bug in constructors,
// if (arguments.length == 1) var inToDate = new Date(); // so use above method.

var fromDate = new Date(inFromDate);
var toDate = new Date(inToDate);

var tempDate = new Date();
if (fromDate.getTime() > toDate.getTime()) {
tempDate = new Date(fromDate);
fromDate = new Date(toDate);
toDate = new Date(tempDate);
}
var totMonths = 12*toDate.getFullYear() + toDate.getMonth() +
-12*fromDate.getFullYear() - fromDate.getMonth()
var years = Math.floor(totMonths / 12)
var months = totMonths - 12*years
if (dateAsNumber(toDate,"D") < dateAsNumber(fromDate,"D")) months -= 1
if (months < 0) {
months = 0
if (years > 0) years -= 1
}

var yearsOff = years + fromDate.getFullYear()
var monthsOff = months + fromDate.getMonth()
if (monthsOff >= 12) {
monthsOff -= 12
yearsOff += 1
}
var tempDate = new Date(fromDate);
tempDate.setFullYear(yearsOff);
tempDate.setMonth(monthsOff); // might push us into early next month, so...
while (tempDate.getDate() < fromDate.getDate() && tempDate.getDate() < 9 )
tempDate.setTime(tempDate.getTime() - 1000*60*60*24); // Feb 29 etc.

var milliSecs = toDate.getTime() - tempDate.getTime();
var oneSecond = 1000;
var oneMinute = 60 * 1000;
var oneHour = 60 * oneMinute;
var oneDay = 24 * oneHour;
var oneWeek = 7 * oneDay;
var weeks = Math.floor(milliSecs / oneWeek);
milliSecs -= weeks * oneWeek;
var days = Math.floor(milliSecs / oneDay);
milliSecs -= days * oneDay;
var hours = Math.floor(milliSecs / oneHour);
milliSecs -= hours * oneHour;
var minutes = Math.floor(milliSecs / oneMinute);
milliSecs -= minutes * oneMinute;
var seconds = Math.floor(milliSecs / oneSecond);

var timeValue = "";
if (years) timeValue += years + ((years==1) ? " year, " : " years, ");
if (months) timeValue += months + ((months==1) ? " month, " : " months, ");
if (weeks) timeValue += weeks + ((weeks==1) ? " week, " : " weeks, ");
if (days) timeValue += days + ((days==1) ? " day, " : " days, ");
var timeValueDays = timeValue.substring(0 , timeValue.length - 2);
timeValue += hours + ((hours==1) ? "hour, " :" hours, ");
timeValue += minutes + ((minutes==1) ? " minute, and " : " minutes, and ");
timeValue += seconds + ((seconds==1) ? " second" : " seconds");

this.years = years;
this.months = months;
this.weeks = weeks;
this.days = days;
this.hours = hours;
this.minutes = minutes;
this.seconds = seconds;
this.text = timeValue;
this.textDays = timeValueDays;
}

function dateAsNumber(inDate,inWhat) {
var what = "", yearBit = 0, monthBit = 0
if (typeof(inWhat) == "undefined" || inWhat.toString() == "" || inWhat.toString() == null) inWhat = ""
what = inWhat.toString().toUpperCase()
if (what != "M" && what != "D") // we want yyyy bit
yearBit = inDate.getFullYear() * Math.pow(10,13);
if (what != "D") // we want month bit
monthBit = inDate.getMonth() * Math.pow(10,11);
return yearBit +
monthBit +
inDate.getDate() * Math.pow(10,09) +
inDate.getHours() * Math.pow(10,07) +
inDate.getMinutes() * Math.pow(10,05) +
inDate.getSeconds() * Math.pow(10,03) +
inDate.getMilliseconds()
}

// ***** SET the DATE and TIME HERE *****
// ( Remembering that in Java Dates,
// months go from 0 (Jan) to 11 (Dec) )

function ageClock() {
var leaveDate = new Date(2009,02,04,14,20) // for 2009 March 04, 7:31am
var now = new Date();
var elapsed = new ElapsedTime(leaveDate,now);
return elapsed.text;
}

function getElement(id) {
return document.all ? document.all(id) :
document.getElementById ? document.getElementById(id) :
document.layers ? document.layers[id] :
null;
}

function centerShowIt(id) {
var winMid, aD = getElement('ageDisplay');
if (!aD) return;
if (window.innerWidth) winMid = innerWidth/2;
else if (document.body) winMid = document.body.clientWidth/2;
if (!document.layers) {
aD.style.left = winMid - aD.offsetWidth/2;
aD.style.visibility = 'visible';
} else {
aD.pageX = winMid - aD.clip.width/2;
aD.visibility = 'show';
}
}

function update() {
var text = ageClock();
var aD = getElement('ageDisplay');
if (!aD) return;
if (!document.layers) {
aD.innerHTML = text + ' ';
} else {
aD.document.write('<SPAN class="bodytext">' + text + ';</SPAN>');
aD.document.close();
}
setTimeout('update()',1000);
}

/* NS4 resize bug fix from webreference.com */
if (document.layers) {
origWidth = innerWidth;
origHeight = innerHeight;
}
if (document.layers) window.onresize = function() {
if (innerWidth != origWidth || innerHeight != origHeight)
location.reload();
}
/********************************************/

window.onload = update;

</SCRIPT>

and


<!-- Copy and Paste into BODY of HTML where age is to appear-->

<SCRIPT type="text/javascript" language="JavaScript">
document.write('<DIV id="ageDisplay" class="bodytext">');
document.write(ageClock());
document.write('</DIV>');
centerShowIt('ageDisplay');
</SCRIPT>

Is there a solution somewhere?
Can anyone (re)write the script to fit above described functionality?
Any tips or referals?

Thanks

Pepin

Philip M
11-21-2011, 08:44 AM
Pepin -

Please do not hijack someone else's thread. You have already (correctly) started a new thread of your own at
http://www.codingforums.com/showthread.php?t=244281

You may be lucky but my first impression is that you are asking for a great deal. The forum is not a free coding servie, but rather aims to help people with a specific Javascript problem. This is ancient code - references in the code to IE4 and NS4 and document.all are not encouraging.

Why should anyone care how old these children are to the second? Was their moment of birth recorded with that level of accuracy?

Novus
06-11-2013, 02:20 PM
On the very first part of the post where would you include a change font. Lets say it hits 5 minutes left and you have multiple timers. All those times get mixed up with the others. When it hits 5 minutes left it would be helpful if that certain timer changes font to red.

vwphillips
06-11-2013, 03:38 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcCountDown(id,mess,secs,mins,hrs,days){
var obj=document.getElementById(id);
var oop=obj.oop
if (!oop){
obj.oop=new zxcCountDownOOP(obj);
}
obj.oop.start(mess,secs,mins,hrs,days);
}

function zxcCountDownOOP(obj,mess){
this.obj=obj;
this.to=null;
}

zxcCountDownOOP.prototype={

start:function(mess,secs,mins,hrs,days){
clearTimeout(this.to);
this.mess=mess;
this.mhd=[mins,hrs,days];
var date=new Date();
this.fin=new Date(date.getFullYear(),date.getMonth(),date.getDate()+(days||0),date.getHours()+(hrs||0),date.getMi nutes()+(mins||0),date.getSeconds()+(secs||0));
this.cng();
},

cng:function(){
var now=new Date(),sec=(this.fin-now)/1000+1,d=Math.floor(sec/60/60/24),h=Math.floor(sec/60/60-d*24),m=Math.floor(sec/60-h*60-d*24*60),s=Math.floor(sec-m*60-h*3600-d*24*60*60);
if (this.fin-now>-500){
this.obj.style.color=sec>6?'black':'red';
this.obj[this.obj.nodeName.toUpperCase()=='INPUT'?'value':'innerHTML']=(this.mhd[2]?(d>9?d:'0'+d)+' days ':'')+(this.mhd[1]||this.mhd[2]?(h>9?h:'0'+h)+' hours ':'')+(this.mhd[0]||this.mhd[1]||this.mhd[2]?(m>9?m:'0'+m)+' minutes ':'')+(s>9?s:'0'+s)+' seconds';
this.to=setTimeout(function(oop){ return function(){ oop.cng(); }}(this),1000);
}
else if (this.mess){
this.obj.style.color='black';
this.obj[this.obj.nodeName.toUpperCase()=='INPUT'?'value':'innerHTML']=this.mess;
}
}

}

/*]]>*/
</script>
</head>

<body onload="zxcCountDown('tst','message',6);zxcCountDown('tst1','message 1',0,0,2,0);">

<span id="tst" ></span> <input type="button" name="" value="Re-Start" onmouseup="zxcCountDown('tst','message',20);"/>
<br />
<span id="tst1" ></span>
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum