js圣诞节倒计时网页

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在线预览：http://keleyi.com/keleyi/phtml/jstexiao/17.htm

以下是代码：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

 <title>javascript节日倒计时-柯乐义</title>

 <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()

 }

 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 keleyi.com

 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 = ""

 alert("Christmas is here!")

 }

 return displaystring

 }

 </script>

 </head>

 <body>

 <div id="countdowncontainer"></div>

 <br />

 <div id="countdowncontainer2"></div>

 <script type="text/javascript">

 var futuredate = new cdtime("countdowncontainer", "December 25, 2013 00:00:00")

 futuredate.displaycountdown("days", formatresults)

 var currentyear=new Date().getFullYear()

 var thischristmasyear=(new Date().getMonth()>=11 && new Date().getDate()>25)? currentyear+1 : currentyear

 var christmas=new cdtime("countdowncontainer2", "December 25, "+thischristmasyear+" 0:0:00")

 christmas.displaycountdown("days", formatresults2)

 </script>

 <div>

 <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>

 </div>

 </body>

 </html>