案例截图
<!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>
</head>
<body>
<div id="dome1">
<span class="day"></span>天|<span class="hour"></span>时|<span class="min"></span>分|<span class="sec"></span>秒
</div>
<div id="dome2">
<span class="day"></span>天|<span class="hour"></span>时|<span class="min"></span>分|<span class="sec"></span>秒
</div>
<div id="dome3">
<span class="day"></span>天|<span class="hour"></span>时|<span class="min"></span>分|<span class="sec"></span>秒
</div>
<div id="dome4">
<span class="day"></span>天|<span class="hour"></span>时|<span class="min"></span>分|<span class="sec"></span>秒
</div>
<div id="dome5">
<span class="day"></span>天|<span class="hour"></span>时|<span class="min"></span>分|<span class="sec"></span>秒
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script>
;(function($){
/*
@CountDown团购倒计时插件
@auther LiuMing
@StartDate 开始时间*(必填)
@EndDate 结束时间*(必填)
@callback (可选)
*/
$.fn.CountDown = function(StartDate, EndDate, callback) {
var $this = $(this);
/*配置参数*/
this.opt = {
Timmer : null,/*定时器缓存*/
oDay : $this.find('.day'),
oHour : $this.find('.hour'),
oMin : $this.find('.min'),
oSec : $this.find('.sec'),
startTime : StartDate.getTime(),/*开始时间*/
endTime : EndDate.getTime(),/*结束*/
callback : callback
}
if(this.opt.startTime > this.opt.endTime){throw new Error("#"+$(this).attr('id')+' StartDate > EndDate');}
this.CountDown_playTime();
}
/*定时器*/
$.fn.CountDown_playTime = function(){
var that = this,
opt = that.opt,
date;
if(opt.Timmer){clearTimeout(opt.Timmer);}
opt.endTime-=1000;
/*倒计时结束*/
if(opt.startTime >= opt.endTime){
if(typeof opt.callback === 'function'){opt.callback();}
return false;
}
/*计算时差*/
date = $.fn.CountDown.getTime(opt.startTime, opt.endTime);
opt.oDay.text(date.day);
opt.oHour.text(date.hour);
opt.oMin.text(date.min);
opt.oSec.text(date.sec);
/*loop*/
opt.Timmer = setTimeout(function(){that.CountDown_playTime();}, 1000);
}
/*获取时间*/
$.fn.CountDown.getTime = function(startTime, endTime){
var _tempTime,day,hour,min,sec;
//计算时差
_tempTime = endTime - startTime;
day = Math.floor(_tempTime/86400000); //1000*60*60*24 = 1/天
_tempTime -= day*86400000;
hour = Math.floor(_tempTime/3600000); //1000*60*60 = 1/小时
_tempTime -= hour*3600000;
min = Math.floor(_tempTime/60000); // 1000*60 = 1/分钟
_tempTime -= min*60000;
sec = Math.floor(_tempTime/1000); // 1秒
/*返回结果*/
return {'day':day, 'hour':hour, 'min':min, 'sec':sec}
}
})(jQuery);
$('#dome1').CountDown(new Date("2014/6/9 11:11:1"), new Date("2014/6/9 11:12:10"));
$('#dome2').CountDown(new Date("2014/6/9 11:11:1"), new Date("2014/6/10 11:11:10"));
$('#dome3').CountDown(new Date("2014/6/9 11:11:1"), new Date("2014/6/12 11:11:10"));
$('#dome4').CountDown(new Date("2014/6/9 11:11:1"), new Date("2014/6/14 11:11:10"));
$('#dome5').CountDown(new Date("2014/6/9 11:11:1"), new Date("2014/6/13 11:11:10"));
</script>
</body>
</html>