js圣诞节倒计时网页

最新推荐文章于 2023-01-15 09:53:45 发布

weixin_34362875

最新推荐文章于 2023-01-15 09:53:45 发布

阅读量331

点赞数 1

文章标签： javascript 前端 xhtml ViewUI

在线预览：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>