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 相关文章推荐
js表格分页实现代码
Sep 18 Javascript
Javascript 中介者模式实例
Dec 16 Javascript
关于全局变量和局部变量的那些事
Jan 11 Javascript
jQuery无刷新分页完整实例代码
Oct 27 Javascript
不得不分享的JavaScript常用方法函数集(下)
Dec 25 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 Javascript
使用jQuery实现一个类似GridView的编辑,更新,取消和删除的功能
Mar 15 Javascript
JavaScript面向对象精要(下部)
Sep 12 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
Jul 15 Javascript
微信小程序实现下拉框功能
Jul 16 Javascript
解决vue scoped html样式无效的问题
Oct 24 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/08/08 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
10个简化PHP开发的工具
2014/12/25 PHP
PHP把MSSQL数据导入到MYSQL的方法
2014/12/27 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
详解WordPress中用于更新和获取用户选项数据的PHP函数
2016/03/08 PHP
不常用但很实用的PHP预定义变量分析
2019/06/25 PHP
Array.slice()与Array.splice()的返回值类型
2006/10/09 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
解析img图片没找到onerror事件 Stack overflow at line: 0
2013/12/23 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
2015/12/17 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
vue实现引入本地json的方法分析
2018/07/12 Javascript
Node.js搭建WEB服务器的示例代码
2018/08/15 Javascript
微信小程序 scroll-view的使用案例代码详解
2020/06/11 Javascript
Python实现批量转换文件编码的方法
2015/07/28 Python
Python搜索引擎实现原理和方法
2017/11/27 Python
对Python 数组的切片操作详解
2018/07/02 Python
Python3 Post登录并且保存cookie登录其他页面的方法
2018/12/28 Python
python跳出双层for循环的解决方法
2019/06/24 Python
python 获取等间隔的数组实例
2019/07/04 Python
python 求定积分和不定积分示例
2019/11/20 Python
python批量修改xml属性的实现方式
2020/03/05 Python
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
简短的公司员工自我评价分享
2013/11/13 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
装饰工程师岗位职责
2014/06/08 职场文书
四查四看整改措施
2014/09/19 职场文书
实习协议书范本
2014/09/25 职场文书
拖欠货款起诉状
2015/05/20 职场文书
Java 多线程协作作业之信号同步
2022/05/11 Java/Android