javascript实现的简单计时器

 更新时间:2015年07月19日 11:16:33   投稿:hebedich  
计时器提供了一 个可以将代码片段异步延时执行的能力,javascript生来是单线程的(在一定时间范围内仅一部分js代码能运行),计时器为我们提供了一种避开这种 限制的方法,从而开辟了另一条执行代码的蹊径。

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

上面出现了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 来获取当前时间

以上所述就是本文的全部内容了,希望大家能够喜欢。

相关文章

  • JavaScript中发出HTTP请求最常用的方法

    JavaScript中发出HTTP请求最常用的方法

    JavaScript具有很好的模块和方法来发送可用于从服务器端资源发送或接收数据的HTTP请求。这篇文章主要介绍了JavaScript中发出HTTP请求最常用的方法,需要的朋友可以参考下
    2018-07-07
  • 一文详解axios四种传参方式及后端接参

    一文详解axios四种传参方式及后端接参

    在开发的过程中,我们会经常使用到axios进行数据的交互,这篇文章主要给大家介绍了关于axios四种传参方式及后端接参的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下
    2023-10-10
  • js数组操作方法总结(必看篇)

    js数组操作方法总结(必看篇)

    下面小编就为大家带来一篇js数组操作方法总结(必看篇)。小编觉得挺不错的,希望对大家有所帮助。一起跟随小编过来看看吧,祝大家游戏愉快哦
    2016-11-11
  • js 实现碰撞检测的示例

    js 实现碰撞检测的示例

    这篇文章主要介绍了js 实现碰撞检测的示例,帮助大家更好的制作js特效,美化自身网页,感兴趣的朋友可以了解下
    2020-10-10
  • JavaScript高级程序设计 阅读笔记(十三) js定义类或对象

    JavaScript高级程序设计 阅读笔记(十三) js定义类或对象

    js定义类或对象的介绍,需要的朋友可以参考下
    2012-08-08
  • js监听键盘事件示例代码

    js监听键盘事件示例代码

    本文为大家详细介绍下使用js如何监听键盘事件,具体实现代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-07-07
  • 求js数组的最大值和最小值的四种方法

    求js数组的最大值和最小值的四种方法

    本篇文章主要介绍了求js数组的最大值和最小值的四种方法,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • JavaScript中的包装对象介绍

    JavaScript中的包装对象介绍

    这篇文章主要介绍了JavaScript中的包装对象介绍,存取字符串、数字、或布尔值的属性时创建的临时对象称作包装对象,本文着重讲解了什么是包装对象,需要的朋友可以参考下
    2015-01-01
  • ES6新特性一: let和const命令详解

    ES6新特性一: let和const命令详解

    这篇文章主要介绍了ES6新特性中的let和const命令,结合实例形式分析了let和const命令的功能、使用方法与相关注意事项,需要的朋友可以参考下
    2017-04-04
  • 学做Bootstrap的第一个页面

    学做Bootstrap的第一个页面

    这篇文章主要为大家介绍了学做Bootstrap的第一个页面,这是学bootstrap的第一个页面,还有许多需要改进的地方,希望大家批评指正
    2016-05-05

最新评论