Sunday, May 15, 2005

Olympic Countdown Timer

This timer is set according to GMT. It starts at 2pm EST and ends at 2pm EST on the 26th (the scheduled start of the closing ceremonies). The background color of the timer is set to morph from green at the beginning of the games, through yellow around the mid-point and to red towards the end of the games (we don’t know what’ll happen to it after the games…we haven’t tested it). It was written by my husband, finkyhead, and you are welcome to use it on your own webpage. To copy it into your webpage, you will need to copy it in 2 parts into your template.

PART 1: Copy this first section into the <head> section of your template.

<style type="text/css">
#knitolympics {
text-align: center;
border: solid 1px;
}
#knitpanic {
text-align: center;
}
</style>

<script type="text/javascript">
function toHex(val)
{
var x = Number(256+val).toString(16);
return x.substr(x.length-2);
}
function to2dig(val)
{
var x = Number(100+val).toString();
return x.substr(x.length-2);
}
function RGB(r,g,b)
{
return '#' + toHex(r) + toHex(g) + toHex(b);
}

// function to update the text
function updateOlympicTimer()
{
// opening ceremonies were 8pm, Feb 10 +1GMT
var timeOpening = Date.UTC(2006,1,10,19,00,00);

// closing ceremonies start 8pm, Feb 26 Torino time (+1GMT)
// So, in UTC/GMT that's 7pm, 19
var timeClosing = Date.UTC(2006,1,26,19,00,00);

// current time, in UTC
// adjust the current time zone to UTC/GMT (looks like getTime is UTC anyway...)
var dateLocal = new Date();
var timeNow = dateLocal.getTime();

// compute the lengths of various time periods
var seclen = 1000;
var minlen = seclen * 60;
var hourlen = minlen * 60;
var daylen = hourlen * 24;

// compute time remaining
var delta = timeClosing - timeNow;
var days = Math.floor(delta / daylen); delta -= days * daylen;
var hours = Math.floor(delta / hourlen); delta -= hours * hourlen;
var minutes = Math.floor(delta / minlen); delta -= minutes * minlen;
var seconds = Math.floor(delta / seclen); //delta -= seconds * seclen;
//var ms = delta;

//compute what % of the way we're there...
var timeTotal = timeClosing - timeOpening;
var pcent = 100 * (timeNow - timeOpening) / timeTotal;
// limit it to 2 decimal places
pcent = (Math.floor(pcent * 100)) / 100;

// pick a color (green 00FF00, yellow FFFF00, red FF0000)
// run r from 00 to FF for the first 50%,
// and then run green down from FF to 00 for the last 50 %
var r,g;
if(pcent <= 50)
{
g = 255;
r = Math.floor(5.1 * pcent);
}
else
{
r = 255;
g = 255 - Math.floor(5.1 * pcent - 255);
}
var color = RGB(r,g,0);

// now update the text
var elem = document.getElementById("knitolympics");
if(elem)
{
elem.innerHTML = '';
//elem.innerHTML += "<b>TIME REMAINING:</b><br><br>";
elem.innerHTML += "<b>" + days + "</b>d ";
elem.innerHTML += "<b>" + hours + "</b>h ";
elem.innerHTML += "<b>" + to2dig(minutes) + "</b>m ";
elem.innerHTML += "<b>" + to2dig(seconds) + "</b>s remaining";
elem.style.background = color;
}

// set the color/text of the panic button
elem = document.getElementById("knitpanic");
if(elem)
{
elem.innerHTML = "Elapsed time: " + pcent + "%";
}

setTimeout("updateOlympicTimer()", 1000);
}

</script>

PART 2: Copy this second section wherever you want the timer to appear on your webpage.

<div id="knitolympics">Knitting Olympics Countdown Timer (Javascript required)</div>
<div id="knitpanic"></div>
<script type="text/javascript">updateOlympicTimer();</script>

Note that Javascript needs to be enabled in your browser options for it to work.

Good luck with your Olympic knitting challenge and remember: there is no need to panic until the timer starts to turn orange ;0)
Posted by Anny at 8:46 p.m. 8 comments
Subscribe to: Posts (Atom)