简单计时器

最近写了很多微信端的互动小游戏，比如下雪花 限时点击 赢取奖品，限时拼图，限时答题等，都是些限时‘游戏’（其实算不上游戏，顶多算是具有一点娱乐性的小互动而已）

上面出现了4个限时，对，没错，这里记录的就是最近写的 ‘计时器’ ...

 

恩 ， 计时器 就一个setInterval 或 setTimeout 即可实现 ，代码不会超过十行！

但是不防抱着没事找事的心态，来写个能复用的计时器

1.能倒计时 也能顺计时

2.复位、暂停、停止，启动功能

 

//计时器
window.timer = (function(){
    function mod(opt){
        //可配置参数 都带有默认值
        //必选参数
        this.ele = typeof(opt.ele)=='string'?document.getElementById(opt.ele):opt.ele;//元素
        //可选参数
        this.startT = opt.startT||0;//时间基数
        this.endT = opt.endT=='undefined'?24*60*60:opt.endT;//结束时间 默认为一天
        this.setStr = opt.setStr||null;//字符串拼接
        this.countdown = opt.countdown||false;//倒计时
        this.step = opt.step||1000;
        
        //不可配置参数
        this.timeV = this.startT;//当前时间
        this.startB = false;//是否启动了计时
        this.pauseB = false;//是否暂停
        
        this.init();
    }
    mod.prototype = {
        constructor : 'timer',
        init : function(){
            this.ele.innerHTML = this.setStr(this.timeV);
        },
        start : function(){
            if(this.pauseB==true||this.startB == true){
                this.pauseB = false;
                return;
            }
            if(this.countdown==false&&this.endT<=this.cardinalNum){
                return false;
            }else if(this.countdown==true&&this.endT>=this.startT){
                return false;
            }
            this.startB = true;
            var v = this.startT,
                this_ = this,
                anim = null;
            anim = setInterval(function(){
                if(this_.startB==false||v==this_.endT){clearInterval(anim);return false}
                if(this_.pauseB==true)return;
                this_.timeV = this_.countdown?--v:++v;
                this_.ele.innerHTML = this_.setStr(this_.timeV);
            },this_.step);
        },
        reset : function(){
            this.startB = false;
            this.timeV = this.startT;
            this.ele.innerHTML = this.setStr(this.timeV);
        },
        pause : function(){
            if(this.startB == true)this.pauseB = true;
        },
        stop : function(){
            this.startB = false;
        }
    }
    return mod;
})();  

 

 

调用方式：

 

var timerO_1 = new timer({
            ele : 'BOX1',
            startT : 0,
            endT : 15,
            setStr : function(num){
                return num+'s';
            }
        });
    
var timerO_2 = new timer({
            ele : 'BOX2',
            startT : 30,
            
            endT : 0,
            countdown : true,
            step : 500,
            setStr : function(num){
                return num+'s';
            }
        });

 

 

这里传入的方法 setStr是计数器计算的当前时间写入ele前的字符串处理

countdown是否为倒计时 默认为顺计时

 

可以通过 timerO.timeV 来获取当前时间

 

代码多了一堆，哈哈

 

dome