zoukankan      html  css  js  c++  java
  • 简单计时器

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

    上面出现了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

  • 相关阅读:
    将数组转换为 List, 使用 Collections.addAll(arrayList, array)
    Numpy学习笔记
    sql 批量修改字段内容
    sql 查询的优化
    选择低薪喜欢的工作, 还是高薪不喜欢的工作 ?
    Tornado + Bootstrap 快速搭建自己的web应用
    sql查询出现次数最多的记录的名称和现次数以及QT聚合查找失败解决
    idea中修改git提交代码的用户名
    初识Spring Cloud与微服务
    微信小程序解析富文本的几种方法
  • 原文地址:https://www.cnblogs.com/chocho/p/4655987.html
Copyright © 2011-2022 走看看