Google has a countdown to 2009 and with all of the newb questions on how to do a proper JavaScript Timer, I thought I would dissect this for ya all and post it up here. Pretty good job from the google guys, but then, I would expect nothing less. I guess I'll do the Calendar next
<?php
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Google Timer</title>
<style type="text/css">
html, body {
margin: 1em 0 0 0;
padding: 0 0 0 0;
background-color: #002040;
color: #FFFFFF;
font: 1em Arial;
}
</style>
<script charset="utf-8" type="text/javascript">
var d = new Date();
var today = d.getDate();
function Calcage(secs, timeUnit, timeUnitMax) {
var s = ((Math.floor(secs / timeUnit)) % timeUnitMax).toString();
if (s.length < 2)
s = '0' + s;
return (s);
}
function CountBackLoop(targetDate, preFix) {
var dthen = new Date(targetDate);
var dnow = new Date();
var ddiff = new Date(dthen - dnow);
var secs = Math.floor(ddiff.valueOf() / 1000);
// calculate the amount of time remaining
var ddays = Calcage(secs, 86400, 100000);
var dhrs = Calcage(secs, 3600, 24);
var dmins = Calcage(secs, 60, 60);
var dsecs = Calcage(secs, 1, 60);
if (secs <= 0)
ddays = dhrs = dmins = dsecs = 0
else
setTimeout('CountBackLoop();', 990);
// write the amount of time remaining to the countdown timer
document.getElementById(preFix + '_day').innerHTML = ddays;
document.getElementById(preFix + '_hr').innerHTML = dhrs;
document.getElementById(preFix + '_min').innerHTML = dmins;
document.getElementById(preFix + '_sec').innerHTML = dsecs;
}
function pageInit() {
CountBackLoop('12/28/2008 15:00', 'TopGear');
CountBackLoop('01/01/2009 00:00', '2009');
}
</script>
</head>
<body onload="pageInit();">
<center>
<h2 id="timer">
<span id="countdown">
<span id="TopGear_day"></span> days,
<span id="TopGear_hr"></span> hours,
<span id="TopGear_min"></span> mins,
<span id="TopGear_sec"></span> secs
until Next Episode of TopGear!
</span>
<br />
<span id="countdown">
<span id="2009_day"></span> days,
<span id="2009_hr"></span> hours,
<span id="2009_min"></span> mins,
<span id="2009_sec"></span> secs
until 2009!
</span>
</h2>
</center>
</body>
</html>
?>