【代码教程】显天数、小时分钟的动态倒计时脚本html代码

2013-08-19 14:11:46 -0400

[代码教程]显天数、小时分钟的动态倒计时脚本html代码

显天数、小时分钟的动态倒计时脚本html代码

✎请勿抄袭本页面,可以复制框内代码

代码说明如下
代码名：显天数、小时分钟的动态倒计时脚本html代码
类型：html
来自：互联网
代码说明：您可以复制以下框内的代码粘贴到您须要的地方!类似电子显示屏风格的网页倒计时效果，可分别显示出倒计的天数、小时、分钟以及当前秒数，部分日期会自动显示标记的文字提示，比如圣诞节到了，默认是英文的，可以改中文显示。!将下方框内代码加入你的网站须要这种功能的地方!

html代码如下框内

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>显天数、小时的动态倒计时脚本</title>
<style style="text/css">
.lcdstyle{
background-color:black;
color:yellow;
font: bold 18px MS Sans Serif;
padding: 3px;
}
.lcdstyle 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
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 until March 23, 2009 18:25:00"
}
else{ 
var displaystring="现在倒计时：未来的某一天，我们相爱！!"
}
return displaystring
}
function formatresults2(){
if (this.timesup==false){
var displaystring="<span class='lcdstyle'>"+arguments[0]+" <sup>天</sup> "+arguments[1]+" <sup>小时</sup> "+arguments[2]+" <sup>minutes</sup> "+arguments[3]+" <sup>seconds</sup></span> left until this Christmas"
}
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", "March 23, 2012 18:25: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>
</body>
</html>

代码效果演示

显天数、小时的动态倒计时脚本

«Newer Older»

Comment:

Name:

Back to home

Subscribe | Register | Login | N