Pages

Monday, 26 September 2011

SWTOR release date JavaScript count down clock

I have added a JavaScript count down clock to the site, based on a count down clock from JavaScript Kit. This counts down to the EU release of Star Wars The Old Republic.

This, in Blogger terms, is a HTML/JavaScript widget with the following content:
<div id="countdowndiv"></div>
<script>
/*
Count down until any date script-
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free scripts here!
*/
//change the text below to reflect your own,
var before="SWTOR"
var current="Today is release day!"
var montharray=new Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec")

function countdown(yr,m,d){
theyear=yr;themonth=m;theday=d
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[m-1]+" "+d+", "+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(dday==0&&dhour==0&&dmin==0&&dsec==1){
document.forms.count.count2.value=current
return
}
else {
var theDiv = document.getElementById("countdowndiv");
theDiv.innerHTML = dday+ " days "+dhour+" hours "+dmin+" minutes"
}
setTimeout("countdown(theyear,themonth,theday)",10000)
}
//enter the count down date using the format year/month/day
countdown(2011,12,22)
</script>
The "countdowndiv" DIV element right at the top is where the message will appear, so can be styled using CSS to whatever you wish. At the end, the call to countdown(2011,12,22) kicks it off for the 22nd of December 2011.

This line here renders the actual text:
theDiv.innerHTML = dday+ " days "+dhour+" hours "+dmin+" minutes"
So you can change that to whatever you wish. I also removed the seconds, which are present in the variable dsec and can be added back in again.

This line waits for 10 seconds and recalculates the clock:
setTimeout("countdown(theyear,themonth,theday)",10000)
So you can drop that value to 1000 if you want to check every second. 10 seconds seems fine to me.

Feel free to use this on your own site!

No comments:

Post a Comment