在線預覽：http://hovertree.com/texiao/js/11/
代碼如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>元旦倒計時javascript特效-何問起</title><meta name="viewport" content="width=device-width, initial-scale=1" /><base target="_blank" />
<style type="text/css">
.keleyilcd {
background-color: black;
color: yellow;
font: bold 18px MS Sans Serif;
padding: 3px;
}
.keleyilcd sup {
font-size: 80%;
}
</style>
<script type="text/javascript">
function cdtime(container, targetdate) {
if (!document.getElementById || !document.getElementById(container)) return
this.container = document.getElementById(container)
this.currentTime = new Date()
this.targetdate = new Date(targetdate)
this.timesup = false
this.updateTime()
}
//hovretree.com
cdtime.prototype.updateTime = function () {
var thisobj = this
this.currentTime.setSeconds(this.currentTime.getSeconds() + 1)
setTimeout(function () { thisobj.updateTime() }, 1000) //update time every second
}
cdtime.prototype.displaycountdown = function (baseunit, functionref) {
this.baseunit = baseunit
this.formatresults = functionref
this.showresults()
}
cdtime.prototype.showresults = function () {
var thisobj = this
var timediff = (this.targetdate - this.currentTime) / 1000
if (timediff < 0) { //if time is up
this.timesup = true
this.container.innerHTML = this.formatresults()
return
}
var oneMinute = 60
var oneHour = 60 * 60
var oneDay = 60 * 60 * 24
var dayfield = Math.floor(timediff / oneDay)
var hourfield = Math.floor((timediff - dayfield * oneDay) / oneHour)
var minutefield = Math.floor((timediff - dayfield * oneDay - hourfield * oneHour) / oneMinute)
var secondfield = Math.floor((timediff - dayfield * oneDay - hourfield * oneHour - minutefield * oneMinute))
if (this.baseunit == "hours") {
hourfield = dayfield * 24 + hourfield
dayfield = "n/a"
}
else if (this.baseunit == "minutes") {
minutefield = dayfield * 24 * 60 + hourfield * 60 + minutefield
dayfield = hourfield = "n/a"
}
else if (this.baseunit == "seconds") {
var secondfield = timediff
dayfield = hourfield = minutefield = "n/a"
}
this.container.innerHTML = this.formatresults(dayfield, hourfield, minutefield, secondfield)
setTimeout(function () { thisobj.showresults() }, 1000) //update results every second
}
function formatresults() {
if (this.timesup == false) {
var displaystring = arguments[0] + " days " + arguments[1] + " hours " + arguments[2] + " minutes " + arguments[3] + " seconds left"
}
else {
var displaystring = "倒計時:"
}
return displaystring
}
function formatresults2() {
if (this.timesup == false) {
var displaystring = " 到元旦節還有<span class='kel"+"eyilcd'>" + arguments[0] + " <sup>天</sup> " + arguments[1] + " <sup>時</sup> " + arguments[2] + " <sup>分</sup> " + arguments[3] + " <sup>秒</sup></span>"
}
else {
var displaystring = "今天是元旦，何問起祝您元旦快樂！"
}
return displaystring
}
</script>
</head>
<body>
<div id="countdowncontainer"></div>
<br />
<div id="hovertreecontainer"></div>
<script type="text/javascript">
var futuredate = new cdtime("countdowncontainer", "January 1, 2016 00:00:00")
futuredate.displaycountdown("days", formatresults)
var currentyear=new Date().getFullYear()
var thischristmasyear=(new Date().getMonth()>0 || new Date().getDate()>1)? currentyear+1 : currentyear
var christmas = new cdtime("hover"+"treecontainer", "January 1, " + thischristmasyear + " 0:0:00")
christmas.displaycountdown("days", formatresults2)
</script>
<div>
<p> <a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效庫</a> <a href="http://hovertree.com/h/bjae/yaundan.htm">原文</a></p>
</div>
</body>
</html>