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>
?
特效:
http://ini.iteye.com/blog/2163592
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。