- JS实现团购倒计时
发布时间：2011-05-11 类别：javascript技术 来源：侠客工作室 -
- 1
- 2
- 3
- 4
- 5
<!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=utf-8" />
<title>JS实现团购倒计时</title>
<script type="text/javascript" src="js/timeCountDown.js"></script>
</head><body>
<div class="demo">
<p class="pl20 b f14">测试需要，现假设倒计时时间为<span class="red">2050年7月30号中午12点整</span></p>
<div class="tuan_img_x">
<div class="time_x tc lh24 b">
<div id="year" class="year time_td">0</div><div id="month" class="month time_td">00</div>
<div id="day" class="day time_td">00</div>
<div id="hour" class="hour time_td">00</div>
<div id="mini" class="time_td mini ml5">00</div>
<div id="sec" class="sec time_td">00</div>
</div></div>
</div>
<script type="text/javascript">
var zxx = {
$: function(id){
return document.getElementById(id);
},
futureDate: Date.UTC(2050, 6, 30, 12),
obj: function(){
return {
sec: zxx.$("sec"),
mini: zxx.$("mini"),
hour: zxx.$("hour"),
day: zxx.$("day"),
month: zxx.$("month"),
year: zxx.$("year")
}
}
};
fnTimeCountDown(zxx.futureDate, zxx.obj());
</script>
</body>
</html>
timeCountDown.js代码
/*
* 倒计时的实现
*/
var fnTimeCountDown = function(d, o){
var f = {
zero: function(n){
var n = parseInt(n, 10);
if(n > 0){
if(n <= 9){
n = "0" + n;
}
return String(n);
}else{
return "00";
}
},
dv: function(){
d = d || Date.UTC(2050, 0, 1); //如果未定义时间，则我们设定倒计时日期是2050年1月1日
var future = new Date(d), now = new Date();
//现在将来秒差值
var dur = Math.round((future.getTime() - now.getTime()) / 1000) + future.getTimezoneOffset() * 60, pms = {
sec: "00",
mini: "00",
hour: "00",
day: "00",
month: "00",
year: "0"
};
if(dur > 0){
pms.sec = f.zero(dur % 60);
pms.mini = Math.floor((dur / 60)) > 0? f.zero(Math.floor((dur / 60)) % 60) : "00";
pms.hour = Math.floor((dur / 3600)) > 0? f.zero(Math.floor((dur / 3600)) % 24) : "00";
pms.day = Math.floor((dur / 86400)) > 0? f.zero(Math.floor((dur / 86400)) % 30) : "00";
//月份，以实际平均每月秒数计算
pms.month = Math.floor((dur / 2629744)) > 0? f.zero(Math.floor((dur / 2629744)) % 12) : "00";
//年份，按按回归年365天5时48分46秒算
pms.year = Math.floor((dur / 31556926)) > 0? Math.floor((dur / 31556926)) : "0";
}
return pms;
},
ui: function(){
if(o.sec){
o.sec.innerHTML = f.dv().sec;
}
if(o.mini){
o.mini.innerHTML = f.dv().mini;
}
if(o.hour){
o.hour.innerHTML = f.dv().hour;
}
if(o.day){
o.day.innerHTML = f.dv().day;
}
if(o.month){
o.month.innerHTML = f.dv().month;
}
if(o.year){
o.year.innerHTML = f.dv().year;
}
setTimeout(f.ui, 1000);
}
};
f.ui();
};- ☆☆☆技术交流群：5684178☆☆☆
- 上一篇：JS实现下拉菜单跳转的两种方法
- 下一篇：JS验证手机号码格式
- 全国网站建设热线：
中搜索：
中搜索：
中搜索：
中搜索：
中搜索：
中搜索：