New Year's Count-Down Timer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Example File From "JavaScript and DHTML Cookbook"
Published by O'Reilly & Associates
Copyright 2003 Danny Goodman
-->
<html>
<head>
<title>Recipe 15.8</title>
<style id="mainStyle" type="text/css">
html {background-color:#cccccc}
body {background-color:#eeeeee; font-family:Tahoma,Arial,Helvetica,sans-serif; font-size:12px;
margin-left:15%; margin-right:15%; border:3px groove darkred; padding:15px}
h1 {text-align:right; font-size:1.5em; font-weight:bold}
h2 {text-align:left; font-size:1.1em; font-weight:bold; text-decoration:underline}
.buttons {margin-top:10px}
</style>
<style type="text/css">
table {table-collapse:collapse; border-spacing:0}
td {border:2px groove black; padding:7px; background-color:#ccffcc}
th {border:2px groove black; padding:7px; background-color:#ffffcc}
.ctr {text-align:center}
</style>
<script type="text/javascript">
if (document.images) {
var imgArray = new Array();
imgArray[0] = new Image(60,120);
imgArray[0].src = "digits/0.gif";
imgArray[1] = new Image(60,120);
imgArray[1].src = "digits/1.gif";
imgArray[2] = new Image(60,120);
imgArray[2].src = "digits/2.gif";
imgArray[3] = new Image(60,120);
imgArray[3].src = "digits/3.gif";
imgArray[4] = new Image(60,120);
imgArray[4].src = "digits/4.gif";
imgArray[5] = new Image(60,120);
imgArray[5].src = "digits/5.gif";
imgArray[6] = new Image(60,120);
imgArray[6].src = "digits/6.gif";
imgArray[7] = new Image(60,120);
imgArray[7].src = "digits/7.gif";
imgArray[8] = new Image(60,120);
imgArray[8].src = "digits/8.gif";
imgArray[9] = new Image(60,120);
imgArray[9].src = "digits/9.gif";
}
var nextYear = new Date().getYear() + 1;
nextYear += (nextYear < 1900) ? 1900 : 0;
var targetDate = new Date(nextYear,0,1);
var targetInMS = targetDate.getTime();
var oneSec = 1000;
var oneMin = 60 * oneSec;
var oneHr = 60 * oneMin;
var oneDay = 24 * oneHr;
function countDown() {
var nowInMS = new Date().getTime();
var diff = targetInMS - nowInMS;
var scratchPad = diff / oneDay;
var daysLeft = Math.floor(scratchPad);
// hours left
diff -= (daysLeft * oneDay);
scratchPad = diff / oneHr;
var hrsLeft = Math.floor(scratchPad);
// minutes left
diff -= (hrsLeft * oneHr);
scratchPad = diff / oneMin;
var minsLeft = Math.floor(scratchPad);
// seconds left
diff -= (minsLeft * oneMin);
scratchPad = diff / oneSec;
var secsLeft = Math.floor(scratchPad);
// now adjust images
setImages(daysLeft, hrsLeft, minsLeft, secsLeft);
}
function setImages(days, hrs, mins, secs) {
var i;
days = formatNum(days, 3);
for (i = 0; i < days.length; i++) {
document.images["days" + i].src = imgArray[parseInt(days.charAt(i))].src;
}
hrs = formatNum(hrs, 2);
for (i = 0; i < hrs.length; i++) {
document.images["hours" + i].src = imgArray[parseInt(hrs.charAt(i))].src;
}
mins = formatNum(mins, 2);
for (i = 0; i < mins.length; i++) {
document.images["minutes" + i].src = imgArray[parseInt(mins.charAt(i))].src;
}
secs = formatNum(secs, 2);
for (i = 0; i < secs.length; i++) {
document.images["seconds" + i].src = imgArray[parseInt(secs.charAt(i))].src;
}
}
function formatNum(num, len) {
var numStr = "" + num;
while (numStr.length < len) {
numStr = "0" + numStr;
}
return numStr
}
</script>
</head>
<body style="margin-left:10%; margin-right:10%" onload="setInterval('countDown()', 1000)">
<h1>New Year's Count-Down Timer</h1>
<hr />
<table cellspacing="5" cellpadding="5">
<tr>
<td align="right">
<img name="days0" src="digits/0.gif" height="120" width="60" alt="days">
<img name="days1" src="digits/0.gif" height="120" width="60" alt="days">
<img name="days2" src="digits/0.gif" height="120" width="60" alt="days">
</td>
<td align="left">
<img src="digits/days.gif" height="120" width="260" alt="days">
</td>
</tr>
<tr>
<td align="right">
<img name="hours0" src="digits/0.gif" height="120" width="60" alt="hours">
<img name="hours1" src="digits/0.gif" height="120" width="60" alt="hours">
</td>
<td align="left">
<img src="digits/hours.gif" height="120" width="360" alt="hours">
</td>
</tr>
<tr>
<td align="right">
<img name="minutes0" src="digits/0.gif" height="120" width="60" alt="minutes">
<img name="minutes1" src="digits/0.gif" height="120" width="60" alt="minutes">
</td>
<td align="left">
<img src="digits/minutes.gif" height="120" width="450" alt="minutes">
</td>
</tr>
<tr>
<td align="right">
<img name="seconds0" src="digits/0.gif" height="120" width="60" alt="seconds">
<img name="seconds1" src="digits/0.gif" height="120" width="60" alt="seconds">
</td>
<td align="left">
<img src="digits/seconds.gif" height="120" width="460" alt="seconds">
</td>
</tr>
</table>
</body>
</html>
Related examples in the same category