PDA

View Full Version : Three Countdown scripts on the same page



rick003
09-14-2012, 01:14 PM
Hi guys,

I found a script what I use for show a countdown timer but I want to use this script 3 times (for different events) on a single page.

The problem is then that this script only show 1 timer.

Can somebody help me plz?



<script language="JavaScript1.2">

function setcountdown(theyear,themonth,theday,thehour,themin,thesec){
yr=theyear;mo=themonth;da=theday;hr=thehour;min=themin;sec=thesec
}

//////////Bewerk het aftelscript hier//////////////////

//STEP 1: verander hier het aftel - script, in het formaat year, month, day, hour(0=midnight,23=11pm), minutes, seconds:
setcountdown(2013,01,01,00,00,00)

//STEP 2: verander hieronder de tekst die na het aftellen moet komen, en de boodschap op de dag van het tijdstip, respectively
var occasion="tot de nieuwsjaarduik kan beginnen."
var message_on_occasion=""

//STEP 3: verander de 5 variabelen hieronder , te weten the width, height, background color, and text style of the countdown area
var countdownwidth='640px'
var countdownheight='35px'
var countdownbgcolor='lightgreen'
var opentags='<font face="Verdana"><small>'
var closetags='</small></font>'

//////////verander hieronder niets//////////////////

var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")
var crosscount=''

function start_countdown(){
if (document.layers)
document.countdownnsmain.visibility="show"
else if (document.all||document.getElementById)
crosscount=document.getElementById&&!document.all?document.getElementById("countdownie") : countdownie
countdown()
}

if (document.all||document.getElementById)
document.write('<span id="countdownie" style="width:'+countdownwidth+'; background-color:'+countdownbgcolor+'"></span>')

window.onload=start_countdown


function countdown(){
var today=new Date()
var todayy=today.getYear()
if (todayy < 1000)
todayy+=1900
var todaym=today.getMonth()
var todayd=today.getDate()
var todayh=today.getHours()
var todaymin=today.getMinutes()
var todaysec=today.getSeconds()
var todaystring=montharray[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec
futurestring=montharray[mo-1]+" "+da+", "+yr+" "+hr+":"+min+":"+sec
dd=Date.parse(futurestring)-Date.parse(todaystring)
dday=Math.floor(dd/(60*60*1000*24)*1)
dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1)
dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1)
dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1)
//if on day of occasion
if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+message_on_occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+message_on_occasion+closetags
return
}
//if passed day of occasion
else if (dday<=-1){
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+"Occasion already passed! "+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+"Occasion already passed! "+closetags
return
}
//else, if not yet
else{
if (document.layers){
document.countdownnsmain.document.countdownnssub.document.write(opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left"+occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+dday+ " dagen, "+dhour+" uren, "+dmin+" minutes, & "+dsec+" minutes over "+occasion+closetags
}
setTimeout("countdown()",1000)
}
</script><ilayer id="countdownnsmain" width="&{countdownwidth};" height="&{countdownheight};" bgColor="&{countdownbgcolor};" visibility="hide"><layer id="countdownnssub" width="&{countdownwidth};" height="&{countdownheight};" left="0" top="0"></layer></ilayer>


It also would be very nice when "Occasion already passed!" the page automatic refresh. (but is not so importend)

Help is much appreciated!

jscheuer1
09-14-2012, 02:43 PM
http://keith-wood.name/countdown.html

vwphillips
09-14-2012, 03:12 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 type="text/javascript">
/*<![CDATA[*/

var zxcCountDown={

months:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],

init:function(o){
var id=o.ID,obj=document.getElementById(id),to=o.CountTo;
o=this['zxc'+id]={
obj:obj,
yr:to[0],
mo:to[1],
da:to[2],
hr:to[3],
min:to[4],
sec:to[5],
Occasion:o.Occasion||'',
OnOccasion:o.OnOccasion||''
}
this.count(o);
},

count:function(o){
var oop=this,today=new Date(),todayy=today.getFullYear(),todaym=today.getMonth(),todayd=today.getDate(),todayh=today.getHours(),todaymin=today.getMinutes(),todaysec=today.getSeconds() ;
var todaystring=this.months[todaym]+" "+todayd+", "+todayy+" "+todayh+":"+todaymin+":"+todaysec,futurestring=this.months[o.mo-1]+" "+o.da+", "+o.yr+" "+o.hr+":"+o.min+":"+o.sec;
var dd=Date.parse(futurestring)-Date.parse(todaystring),dday=Math.floor(dd/(60*60*1000*24)*1),dhour=Math.floor((dd%(60*60*1000*24))/(60*60*1000)*1),dmin=Math.floor(((dd%(60*60*1000*24))%(60*60*1000))/(60*1000)*1),dsec=Math.floor((((dd%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);

if(dday<=0&&dhour<=0&&dmin<=0&&dsec<=1&&todayd==da){ //if on day of occasion
o.obj.innerHTML=o.OnOccasion;
}
else if (dday<=-1){ //if passed day of occasion
o.obj.innerHTML="Occasion already passed! ";
}
else{ //else, if not yet
o.obj.innerHTML=this.nu(dday)+ " dagen, "+this.nu(dhour)+" uren, "+this.nu(dmin)+" minutes, & "+this.nu(dsec)+" minutes over "+o.Occasion
o.to=setTimeout(function(){ oop.count(o); },1000);
}
},

nu:function(nu){
return (nu>9?'':'0')+nu;
}
}

window.onload=function(){

zxcCountDown.init({
ID:'count1',
CountTo:[2013,01,01,00,00,00],
Occasion:'tot de nieuwsjaarduik kan beginnen.',
OnOccasion:''
});

zxcCountDown.init({
ID:'count2',
CountTo:[2013,02,01,00,20,00],
Occasion:'',
OnOccasion:''
});

zxcCountDown.init({
ID:'count3',
CountTo:[2013,02,01,10,30,10],
Occasion:'',
OnOccasion:''
});

}

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

<body>
<div id="count1" style="width:640px;height35px;background-Color:lightgreen">
</div>
<div id="count2" style="width:640px;height35px;background-Color:lightgreen">
</div>
<div id="count3" style="width:640px;height35px;background-Color:lightgreen">
</div>

</body>

</html>