【JQuery插件】团购倒计时

案例截图

<!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>

  

原文地址:https://www.cnblogs.com/dtdxrk/p/4028395.html