JavaScript DHTML/Page Components/Count Down
New Year"s Count-Down Timer
<source lang="html4strict"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">
<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)">
New Year"s Count-Down Timer
<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">
|
<img src="digits/days.gif" height="120" width="260" alt="days"> |
<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">
|
<img src="digits/hours.gif" height="120" width="360" alt="hours"> |
<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">
|
<img src="digits/minutes.gif" height="120" width="450" alt="minutes"> |
<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">
|
<img src="digits/seconds.gif" height="120" width="460" alt="seconds"> |
</body> </html>
</source>
setTimeout() method
<source lang="html4strict">
<html> <head> <script type="text/javascript"> function timeout(){
setTimeout("alert("Hi")", 1000)
} </script> </head> <body> <form> <input type="button" onclick="timeout()" value="Count down"> </form> </body> </html>
</source>
