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 入门讲解1
Apr 15 Javascript
js获取系统的根路径实现介绍
Sep 08 Javascript
JQuery标签页效果实例详解
Dec 24 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
js实现四舍五入完全保留两位小数的方法
Aug 02 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
JS获取多维数组中相同键的值实现方法示例
Jan 06 Javascript
Vue.js结合bootstrap实现分页控件
Mar 10 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
在vscode中统一vue编码风格的方法
Feb 22 Javascript
Antd的table组件表格的序号自增操作
Oct 27 Javascript
基于Vant UI框架实现时间段选择器
Dec 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 数学运算验证码实现代码
2009/10/11 PHP
php简单实现多语言切换的方法
2016/05/09 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
js实时获取系统当前时间实例代码
2013/06/28 Javascript
解析JavaScript中点号“.”的多义性
2013/12/02 Javascript
javascript搜索框点击文字消失失焦时文本出现
2014/09/18 Javascript
轻松实现jquery手风琴效果
2016/01/14 Javascript
javascript的 {} 语句块详解
2016/02/27 Javascript
jQuery实现的背景颜色渐变动画效果示例
2017/03/24 jQuery
JavaScript中十种一步拷贝数组的方法实例详解
2019/04/22 Javascript
javascript实现遮罩层动态效果实例
2019/05/14 Javascript
JavaScript的console命令使用实例
2019/12/03 Javascript
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
解决py2exe打包后,总是多显示一个DOS黑色窗口的问题
2019/06/21 Python
python 同时读取多个文件的例子
2019/07/16 Python
Python列表删除元素del、pop()和remove()的区别小结
2019/09/11 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
意大利制造的西装、衬衫和针对男士量身定制的服装:Lanieri
2018/04/08 全球购物
大一新生军训时的自我评价分享
2013/12/05 职场文书
卫生安全检查制度
2014/02/04 职场文书
实习生岗位职责
2014/04/12 职场文书
班干部竞选演讲稿
2014/04/24 职场文书
人大调研汇报材料
2014/08/14 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
酒店前台辞职书
2015/02/26 职场文书
整改通知书
2015/04/20 职场文书
2015年库房工作总结
2015/04/30 职场文书
大学生受助感言
2015/08/01 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书