码迷,mamicode.com
首页 > 其他好文 > 详细

简单计时器

时间:2015-07-18 02:05:18      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

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

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

 

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

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

1.能倒计时 也能顺计时

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

 

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

 

调用方式:

 

timerO = new timer({
            ele : ‘timeBox‘,
            cardinalNum : this_.time/1000,
            countdown : true,
            endT : 0,
            setStr : function(num){
                return num+‘‘‘;
            }
        });

 

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

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

cardinalNum为时间基数

 

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

 

代码多了一堆,哈哈

 

简单计时器

标签:

原文地址:http://www.cnblogs.com/chocho/p/4655987.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!