在线预览：http://keleyi.com/keleyi/phtml/jstexiao/17.htm
以下是代码：
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>javascript节日倒计时-柯乐义</title> 5 <style type="text/css"> 6 .keleyilcd { 7 background-color: black; 8 color: yellow; 9 font: bold 18px MS Sans Serif; 10 padding: 3px; 11 } 12 13 .keleyilcd sup { 14 font-size: 80%; 15 } 16 </style> 17 <script type="text/javascript"> 18 function cdtime(container, targetdate) { 19 if (!document.getElementById || !document.getElementById(container)) return 20 this.container = document.getElementById(container) 21 this.currentTime = new Date() 22 this.targetdate = new Date(targetdate) 23 this.timesup = false 24 this.updateTime() 25 } 26 cdtime.prototype.updateTime = function () { 27 var thisobj = this 28 this.currentTime.setSeconds(this.currentTime.getSeconds() + 1) 29 setTimeout(function () { thisobj.updateTime() }, 1000) //update time every second 30 } 31 cdtime.prototype.displaycountdown = function (baseunit, functionref) { 32 this.baseunit = baseunit 33 this.formatresults = functionref 34 this.showresults() 35 } 36 cdtime.prototype.showresults = function () { 37 var thisobj = this 38 var timediff = (this.targetdate - this.currentTime) / 1000 39 if (timediff < 0) { //if time is up keleyi.com 40 this.timesup = true 41 this.container.innerHTML = this.formatresults() 42 return 43 } 44 var oneMinute = 60 45 var oneHour = 60 * 60 46 var oneDay = 60 * 60 * 24 47 var dayfield = Math.floor(timediff / oneDay) 48 var hourfield = Math.floor((timediff - dayfield * oneDay) / oneHour) 49 var minutefield = Math.floor((timediff - dayfield * oneDay - hourfield * oneHour) / oneMinute) 50 var secondfield = Math.floor((timediff - dayfield * oneDay - hourfield * oneHour - minutefield * oneMinute)) 51 if (this.baseunit == "hours") { 52 hourfield = dayfield * 24 + hourfield 53 dayfield = "n/a" 54 } 55 else if (this.baseunit == "minutes") { 56 minutefield = dayfield * 24 * 60 + hourfield * 60 + minutefield 57 dayfield = hourfield = "n/a" 58 } 59 else if (this.baseunit == "seconds") { 60 var secondfield = timediff 61 dayfield = hourfield = minutefield = "n/a" 62 } 63 this.container.innerHTML = this.formatresults(dayfield, hourfield, minutefield, secondfield) 64 setTimeout(function () { thisobj.showresults() }, 1000) //update results every second 65 } 66 function formatresults() { 67 if (this.timesup == false) { 68 var displaystring = arguments[0] + " days " + arguments[1] + " hours " + arguments[2] + " minutes " + arguments[3] + " seconds left" 69 } 70 else { 71 var displaystring = "倒计时:" 72 } 73 return displaystring 74 } 75 function formatresults2() { 76 if (this.timesup == false) { 77 var displaystring = " 到圣诞节还有<span class='kel"+"eyilcd'>" + arguments[0] + " <sup>天</sup> " + arguments[1] + " <sup>时</sup> " + arguments[2] + " <sup>分</sup> " + arguments[3] + " <sup>秒</sup></span>" 78 } 79 else { 80 var displaystring = "" 81 alert("Christmas is here!") 82 } 83 return displaystring 84 } 85 </script> 86 </head> 87 <body> 88 <div id="countdowncontainer"></div> 89 <br /> 90 <div id="countdowncontainer2"></div> 91 <script type="text/javascript"> 92 var futuredate = new cdtime("countdowncontainer", "December 25, 2013 00:00:00") 93 futuredate.displaycountdown("days", formatresults) 94 var currentyear=new Date().getFullYear() 95 var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>25)? currentyear+1 : currentyear 96 var christmas=new cdtime("countdowncontainer2", "December 25, "+thischristmasyear+" 0:0:00") 97 christmas.displaycountdown("days", formatresults2) 98 </script> 99 <div> 100 <p>来源：<a href="http://keleyi.com/a/bjad/3s0khhpt.htm">原文</a> <a href="http://keleyi.com">首页</a> <a href="http://keleyi.com/keleyi/phtml/">特效库</a> <a href="http://keleyi.com/a/bjac/iqiiedy2.htm">圣诞快乐</a></p> 101 </div> 102 </body> 103 </html>