封装的倒计时插件

HTML

 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
         <div id="content"></div>
    </body>
</html>
<script type="text/javascript" src="countDown.js"></script>
<script>
    _timeCountDown.openCountDown("content",{//ID名称    
        startTime:'2016-07-30 10:07:55',//开始时间
        endTime:'2016-07-30 10:08:00',//结束时间,产品预售时间        
        leftTitle:"倒计时:",//左侧名称
        splitDate:false,//是否拆分数字
        colonStat:false,//是否把小时分转换成：
        timeCallBack:"lendSellOver()"    //关闭执行的回调函数     
    });
    function lendSellOver(){
        alert(11)
    }
</script>

 

倒计时JS插件

/**
 * @param startTime 开始时间
 * @param endTime 结束时间
 * @param timeCallBack 回调函数
 * 
 *     var _TimeCountDown = new TimeCountDown("sttime1",{    
        startTime:'2016-07-30 10:07:55',        //开始时间
        endTime:'2016-07-30 10:08:00',            //结束时间        
        timeCallBack:"timeOverfun",  //回调函数
    });
 */


(function(window,undefined){
    var timeCountDown=function(){};
    timeCountDown.prototype = {
            openCountDown:function(container, params){
                this.opt=params;
                this.container=container;
                this.nTime=this.calculateTime();
                if(!params.splitDate){            
                    this.countdown();
                }else{        
                    this.splitCountdown();            
                }
            },
            countdown:function(){
                    var interval = 1000; //毫秒        
                    var time;
                     this.nTime = this.nTime - interval; 
                      var leave1 = this.nTime;//计算天数后剩余的毫秒数
                     var t = Math.floor(Math.floor((leave1/(3600*1000))/24));
                      var hleave = this.nTime%((24*3600*1000));
                      //把剩余毫秒数转换为小时
                    var h = Math.floor(hleave/(3600*1000)) < 10 ? "0"+ Math.floor(hleave/(3600*1000)) : Math.floor(hleave/(3600*1000));    
                    var leave2 = this.nTime%(3600*1000);        //计算小时数后剩余的毫秒数
                    //把转换小时之后，剩余毫秒数转换为分钟
                    var m = Math.floor(leave2/(60*1000)) < 10 ? "0" + Math.floor(leave2/(60*1000)) : Math.floor(leave2/(60*1000));
                    
                    //把转换分钟之后，剩余毫秒数转换为秒
                    var leave3 = leave2%(60*1000);      //计算分钟数后剩余的毫秒数
                    var s = Math.round(leave3/1000) < 10 ? "0" + Math.round(leave3/1000) : Math.round(leave3/1000);    
                     
                     if(!this.opt.colonStat){
                         if(t == 0){
                             time = this.opt.leftTitle+"<span>" + h + "</span><label>时</label><span>" + m + "</span><label>分</label><span>" + s + "</span><label>秒</label>";
                             
                         }else{
                             
                             time = this.opt.leftTitle+"<span>" + t + "</span><label>天</label><span>" + h + "</span><label>时</label><span>" + m + "</span><label>分</label><span>" + s + "</span><label>秒</label>";
                         }                         
                     }else{
                             time = this.opt.leftTitle+"<span>" + h + "</span><label>:</label><span>" + m + "</span><label>:</label><span>" + s + "</span>";                     
                     }                
                    var callBackTime = t+h+m+s;
                    document.querySelector("#"+this.container).innerHTML = time;
                    if(callBackTime <= 0){
                        eval(this.opt.timeCallBack);
                        return false;
                    }
                    var that = this;
                    setTimeout(function(){
                        that.countdown();
                    },interval);                
            },
            splitCountdown:function(){
                    var interval = 1000; //毫秒        
                    var time;
                     this.nTime = this.nTime - interval; 
                    console.log(this.nTime);
                      var leave1 = this.nTime;//计算天数后剩余的毫秒数
                     var t = Math.floor((leave1/(3600*1000))/24) < 10 ? "0" + Math.floor((leave1/(3600*1000))/24) : Math.floor((leave1/(3600*1000))/24);
                      var hleave = this.nTime%((24*3600*1000));
                      //把剩余毫秒数转换为小时
                    var h = Math.floor(hleave/(3600*1000)) < 10 ? "0"+ Math.floor(hleave/(3600*1000)) : Math.floor(hleave/(3600*1000));    
                    var leave2 = this.nTime%(3600*1000);        //计算小时数后剩余的毫秒数
                    //把转换小时之后，剩余毫秒数转换为分钟
                    var m = Math.floor(leave2/(60*1000)) < 10 ? "0" + Math.floor(leave2/(60*1000)) : Math.floor(leave2/(60*1000));
                    
                    //把转换分钟之后，剩余毫秒数转换为秒
                    var leave3 = leave2%(60*1000);      //计算分钟数后剩余的毫秒数
                    var s = Math.round(leave3/1000) < 10 ? "0" + Math.round(leave3/1000) : Math.round(leave3/1000);    
                    //拆分小时数
                     var arrT = this.subStr(t+"");
                     //拆分小时数
                     var arrH = this.subStr(h+"");
                     //拆分分钟数
                     var arrM = this.subStr(m+"");
                     //拆分秒数
                    var arrS = this.subStr(s+"");
                    if(t == 0){
                        time = this.opt.leftTitle+"<span>" + arrH[0] + "</span><span>" + arrH[1] + "</span><label>时</label><span>" + arrM[0] + "</span><span>" + arrM[1] + "</span><label>分</label><span>" + arrS[0] + "</span><span>" + arrS[1] + "</span><label>秒</label>";
                    }else{
                        time = this.opt.leftTitle+"<span>" + arrT[0] + "</span><span>" + arrT[1] + "</span><label>天</label><span>" + arrH[0] + "</span><span>" + arrH[1] + "</span><label>时</label><span>" + arrM[0] + "</span><span>" + arrM[1] + "</span><label>分</label><span>" + arrS[0] + "</span><span>" + arrS[1] + "</span><label>秒</label>";
                    }
                    var callBackTime = t+h+m+s;
                    document.querySelector("#"+this.container).innerHTML = time;
                    if(callBackTime <= 0){
                        eval(this.opt.timeCallBack);
                        return false;
                    }
                    var that = this;
                    setTimeout(function(){
                        that.splitCountdown();
                    },interval);                
            }, 
            subStr:function(str){
                var arr = new Array();
                for(var i = 0; i<str.length; i++){                
                    arr[i] = str.substring(i,i+1);
                }
                return arr;
            },    
            calculateTime :function(){
                var startTime = this.vert(this.opt.startTime);                
                var endTime = this.vert(this.opt.endTime);
                var time = endTime - startTime;  //时间差的毫秒数 ;
                return time;
            },
            vert:function(time){
                if(typeof time == "undefined" || time==""){
                    return false;
                }
                var strtime = (time).replace(/-/g,"/");
                var date1 = new Date(strtime);
                return parseInt(date1.getTime());            
            }
    }
    window.timeCountDown=timeCountDown;
})(window,undefined);
var _timeCountDown= new timeCountDown();

 

posted @ 2017-02-08 14:30  归尘2016  阅读(430)  评论(0)  编辑  收藏  举报