JavaScript – Countdown Timer

In response to the numerous Facebook posts asking when the next Wrath of Heroes BETA test is, I created a countdown timer that works in each time-zone.

It currently exists at: http://www.textboxsolutions.co.uk/projects/woh/beta.html and I plan to update it each time there is a BETA test.

I have been working on integrating it to the Wrath of Heroes Wiki but I have had some problems with the JavaScript updating in a timely manner.

Update: the countdown timer is now on the wiki.

Read More for the code.

The following CSS code makes the time appear as a LCD clock:

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

Javascript – this stuff does the work:

/*START BETA COUNTDOWNS*/
console.log("WoH timers init - 1");
function countdown(container, startstr, endstr)
{
//timer wont work if these return false
if (!document.getElementById || !document.getElementById(container)) return
var offsetMinutes = 0; //minutes difference between listed dates and server time
this.container = document.getElementById(container);
this.localtime = new Date();
this.startdate = new Date(startstr);
this.enddate = new Date(endstr);
this.localtime.setTime(this.localtime.getTime() + this.localtime.getTimezoneOffset() * 60 * 1000) //add user offset to server time
}
function start(countdowns)
{
for (i = 0; i < countdowns.length; i++)
{
theCountdown = countdowns[i];
theCountdown.updateTimes();
}
}
countdown.prototype.updateTimes = function()
{
this.localtime.setSeconds(this.localtime.getSeconds() + 1);
var oneMinute = 60; //minute unit in seconds
var oneHour = 3600; //hour unit in seconds
var oneDay = 86400; //day unit in seconds
var thisobj = this;
var startDiff = (this.startdate - this.localtime) / 1000; //diff in seconds
//has event started
if (startDiff < 0)
{
//has event finished
var endDiff = (this.enddate - this.localtime) / 1000;
if (endDiff < 0)
{
this.container.innerHTML = "FINISHED";
return;
}
var endDays = Math.floor(endDiff / oneDay);
var endHours = Math.floor((endDiff - endDays * oneDay) / oneHour);
var endMinutes = Math.floor((endDiff - endDays * oneDay - endHours * oneHour) / oneMinute);
var endSeconds = Math.floor(endDiff - endDays * oneDay - endHours * oneHour - endMinutes * oneMinute);
this.container.innerHTML = "ENDS: " + tidy(endDays) + ":" + tidy(endHours) + ":" + tidy(endMinutes) + ":" + tidy(endSeconds) + "";
}
else
{
var startDays = Math.floor(startDiff / oneDay);
var startHours = Math.floor((startDiff - startDays * oneDay) / oneHour);
var startMinutes = Math.floor((startDiff - startDays * oneDay - startHours * oneHour) / oneMinute);
var startSeconds = Math.floor(startDiff - startDays * oneDay - startHours * oneHour - startMinutes * oneMinute);
this.container.innerHTML = "STARTS: " + tidy(startDays) + ":" + tidy(startHours) + ":" + tidy(startMinutes) + ":" + tidy(startSeconds) + "";
}
setTimeout(function(){thisobj.updateTimes()}, 1000) //update results every second
}
window.onload = function()
{
console.log("WoH timers start - 1");
var beta6 = new countdown('beta6', 'September 16, 2011 14:00:00', 'September 16, 2011 16:00:00');
var beta7 = new countdown('beta7', 'September 16, 2011 23:00:00', 'September 17, 2011 01:00:00');
var beta8 = new countdown('beta8', 'September 17, 2011 17:00:00', 'September 17, 2011 21:00:00');
var countdowns = new Array(beta6, beta7, beta8);
start(countdowns);
console.log("WoH timers started - 1");
}
/* END BETA COUNTDOWNS*/
function tidy(number)
{
if (number < 10)
return "0" + number;
return number;
}

Advertisements