javascript实现的简单计时器


Posted in Javascript onJuly 19, 2015

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

上面出现了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 相关文章推荐
了解jQuery技巧来提高你的代码
Jan 08 Javascript
JS运行耗时操作的延时显示方法
Nov 19 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
Jun 09 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
React-router 4 按需加载的实现方式及原理详解
May 25 Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 Javascript
Node.js API详解之 zlib模块用法分析
May 19 Javascript
javascript中setInterval的用法
Jul 19 #Javascript
js中跨域方法原理详解
Jul 19 #Javascript
javascript获取网页宽高方法汇总
Jul 19 #Javascript
jQuery获取URL请求参数的方法
Jul 18 #Javascript
jQuery增加自定义函数的方法
Jul 18 #Javascript
jQuery插件简单实现方法
Jul 18 #Javascript
javascript实现页面刷新时自动清空表单并选中的方法
Jul 18 #Javascript
You might like
PHP技术开发技巧分享
2010/03/23 PHP
php 提速工具eAccelerator 配置参数详解
2010/05/16 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
PHP之生成GIF动画的实现方法
2013/06/07 PHP
php中的字符编码转换函数用法示例
2014/10/20 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
php封装json通信接口详解及实例
2017/03/07 PHP
PHP优化之批量操作MySQL实例分析
2020/04/23 PHP
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
详解javascript遍历方式
2015/11/11 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
JS控制TreeView的结点选择
2016/11/11 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
一个Vue页面的内存泄露分析详解
2018/06/25 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
python sys模块sys.path使用方法示例
2013/12/04 Python
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
css3 border旋转时的动画应用
2016/01/22 HTML / CSS
英国在线房屋中介网站:Yopa
2018/01/09 全球购物
一个SQL面试题
2014/08/21 面试题
建筑行业的大学生自我评价
2013/12/08 职场文书
大学生职业生涯规划书模板
2014/01/18 职场文书
毕业评语大全
2014/05/04 职场文书
2014年自愿离婚协议书范本
2014/09/25 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
稽核岗位职责范本
2015/04/13 职场文书
婚姻出轨保证书
2015/05/08 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
python实现图片批量压缩
2021/04/24 Python
java Nio使用NioSocket客户端与服务端交互实现方式
2021/06/15 Java/Android
SpringAop日志找不到方法的处理
2021/06/21 Java/Android