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 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
在JavaScript中typeof的用途介绍
Apr 11 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
js查找某元素中的所有图片地址的方法
Jan 16 Javascript
iframe调用父页面函数示例详解
Jul 17 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
Sep 01 Javascript
2014最热门的JavaScript代码高亮插件推荐
Nov 25 Javascript
jQuery多个版本和其他js库冲突的解决方法
Aug 11 Javascript
js面向对象实现canvas制作彩虹球喷枪效果
Sep 24 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 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
DIY一个适配电脑声卡的动圈话筒放大器
2021/03/02 无线电
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
Laravel 5.1 框架Blade模板引擎用法实例分析
2020/01/04 PHP
PHP中-&gt;和=&gt;的含义及使用示例解析
2020/08/06 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
javascript json 新手入门文档
2009/12/03 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
解析Jquery的LigerUI如何实现文件上传
2013/07/09 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
详解基于webpack搭建react运行环境
2017/06/01 Javascript
vue中七牛插件使用的实例代码
2017/07/28 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
js数据类型检测总结
2018/08/05 Javascript
微信小程序用户位置权限的获取方法(拒绝后提醒)
2018/11/15 Javascript
微信小程序学习笔记之目录结构、基本配置图文详解
2019/03/28 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
python 解决动态的定义变量名,并给其赋值的方法(大数据处理)
2018/11/10 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
通过cmd进入python的步骤
2020/06/16 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
Python制作简单的剪刀石头布游戏
2020/12/10 Python
PyCharm 光标变成黑块的解决方式
2021/02/06 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
英文商务邀请函范文
2015/01/31 职场文书
市场部经理岗位职责
2015/02/02 职场文书
2016年教师节感言
2015/12/09 职场文书
重温经典:乔布斯在斯坦福大学的毕业演讲(双语)
2019/08/26 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
Oracle查看表空间使用率以及爆满解决方案详解
2022/07/23 Oracle