JavaScript countdown to a set date and time

[GaryKearley]

Hi,

I want to create a countdown timer for a particular date, to use on a website.

I need the timer to be in a basic format as the user wants to stick it in as a signature on a particular forum he is a member of.

I want it to look like the Alternative version on this site, ie

It is 83 days, 20 hours, 37 minutes and 15 seconds until May 16, 2005, at 8:00:00 AM - this text is returned to the browser as basic text - how do they do that!!!

Link to Website

I know this is probably really simple, but the extent of my html knowledge is making simple websites (personal ones) and I can just about get writing and pictures to display!

It is fine to use the client clock, as this is a UK based forum the guy uses, and everyone should be on UK time.

so really I am thinking some basic counter which will display the results the same as on that linked website...

Gary

[COLOR=#FF0000 #000000]" There are very few [/color][COLOR=#FF8000 #000000]problems that cannot [/color][COLOR=#FFFF00 #000000]be solved through a [/color][COLOR=#00FF00 #000000]suitable application of [/color][COLOR=#00FFFF #000000]high explosives "[/color]

 

[GaryKearley]

[COLOR=#000000]
<script language="JavaScript1.2">

function setcountdown(theyear,themonth,theday){
yr=theyear;mo=themonth;da=theday
}

//////////CONFIGURE THE COUNTDOWN SCRIPT HERE//////////////////

//STEP 1: Configure the countdown-to date, in the format year, month, day:
setcountdown(2005,05,16)

//STEP 2: Change the two text below to reflect the occasion, and message to display on that occasion, respectively
var occasion="Tim's Bike Meet!"
var message_on_occasion="It's today!"

//STEP 3: Configure the below 5 variables to set the width, height, background color, and text style of the countdown area
var countdownwidth='480px'
var countdownheight='20px'
var countdownbgcolor='lightblue'
var opentags='<font face="Verdana"><small>'
var closetags='</small></font>'

//////////DO NOT EDIT PASS THIS LINE//////////////////

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
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 until "+occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left until "+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>
[/color]

I have found this code, but I can only figure out how to change the date, not the time, the code counts down to - I need to try to set 08:00am as the countdown time...

Gary

[COLOR=#FF0000 #000000]" There are very few [/color][COLOR=#FF8000 #000000]problems that cannot [/color][COLOR=#FFFF00 #000000]be solved through a [/color][COLOR=#00FF00 #000000]suitable application of [/color][COLOR=#00FFFF #000000]high explosives "[/color]

 

[GaryKearley]

Okay, I Have got the code to do this now.

Unless anyone knows a neater, better way to do this, as the code is rather long, and probably will not work as this guys sig.

[COLOR=#000000]
<script language="JavaScript1.2">

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

//////////CONFIGURE THE COUNTDOWN SCRIPT HERE//////////////////

//STEP 1: Configure the countdown-to date, in the format year, month, day, hour(0=midnight,23=11pm), minutes, seconds:
setcountdown(2005,05,16,08,00,00)

//STEP 2: Change the two text below to reflect the occasion, and message to display on that occasion, respectively
var occasion="Tim's bike meet!"
var message_on_occasion="Meet is today!"

//STEP 3: Configure the below 5 variables to set the width, height, background color, and text style of the countdown area
var countdownwidth='520px'
var countdownheight='35px'
var countdownbgcolor='lightyellow'
var opentags='<font face="Verdana"><small>'
var closetags='</small></font>'

//////////DO NOT EDIT PAST THIS LINE//////////////////

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 until "+occasion+closetags)
document.countdownnsmain.document.countdownnssub.document.close()
}
else if (document.all||document.getElementById)
crosscount.innerHTML=opentags+dday+ " days, "+dhour+" hours, "+dmin+" minutes, and "+dsec+" seconds left until "+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>
[/color]

Gary

[COLOR=#FF0000 #000000]" There are very few [/color][COLOR=#FF8000 #000000]problems that cannot [/color][COLOR=#FFFF00 #000000]be solved through a [/color][COLOR=#00FF00 #000000]suitable application of [/color][COLOR=#00FFFF #000000]high explosives "[/color]

 

[GaryKearley]

Oh, I am really sorry for the long code sections here!!! )

Gary

[COLOR=#FF0000 #000000]" There are very few [/color][COLOR=#FF8000 #000000]problems that cannot [/color][COLOR=#FFFF00 #000000]be solved through a [/color][COLOR=#00FF00 #000000]suitable application of [/color][COLOR=#00FFFF #000000]high explosives "[/color]

 

[JontyMC]

I doubt if they'll let you use javascript on a forum.

 

[GaryKearley]

thats what I am concerned about, so is there (as far as anyone knows) a way to do this, not using javascript?

say very similar to that site

http://www.timeanddate.com/counters/customcounter.html?day=16&month=05&year=2005&hour=08&min=00

as that seems to return basic HTML, obviously this then runs something on a server, rather than client end (maybe) and this might be more difficult to set-up/get working, but the way that site works is exactly what I want. - how did they do it!

Thanks and please excuse my ignorance

Gary

[COLOR=#FF0000 #000000]" There are very few [/color][COLOR=#FF8000 #000000]problems that cannot [/color][COLOR=#FFFF00 #000000]be solved through a [/color][COLOR=#00FF00 #000000]suitable application of [/color][COLOR=#00FFFF #000000]high explosives "[/color]

 

[JontyMC]

You'll have to find out exactly what you can and can't use on this forum. I'm pretty sure you won't be allowed javascript, because you could mess with the rest of the page. Perhaps you could use an iframe thats links to an external page of yours that has the code on it. But I doubt it.

 

[BabyJeffy]

You could write a (php, asp, jsp etc) page that builds up an image server-side and delivers the image as binary data. Anyone that requests the URL gets an image returned that is custom built for each request. This would serve a dual purpose of allowing you to count (and capture details of) viewers of the forum post.

Just a suggestion.

Jeff