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 相关文章推荐
网页中的图片的处理方法与代码
Nov 26 Javascript
javascript实现的登陆遮罩效果汇总
Nov 09 Javascript
js+html5操作sqlite数据库的方法
Feb 02 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
Nov 21 Javascript
Javascript的this用法
Jan 16 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
关于javascript获取内联样式与嵌入式样式的实例
Jun 01 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
Vue-Router模式和钩子的用法
Feb 28 Javascript
Vue.directive使用注意(小结)
Aug 31 Javascript
JavaScript基础之静态方法和实例方法分析
Dec 26 Javascript
如何用原生js写一个弹窗消息提醒插件
May 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分页显示制作详细讲解
2006/12/05 PHP
PHP中SERIALIZE和JSON的序列化与反序列化操作区别分析
2016/10/11 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
如何修改yii2.0自带的user表为其它的表
2017/08/01 PHP
Yii框架日志操作图文与实例详解
2019/09/09 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
动态控制Table的js代码
2007/03/07 Javascript
Javascript 入门基础学习
2010/03/10 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
jQuery中is()方法用法实例
2015/01/06 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
第二章之Bootstrap 页面排版样式
2016/04/25 Javascript
jQuery中Nicescroll滚动条插件的用法
2016/11/10 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
2017/09/08 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
vue富文本编辑器组件vue-quill-edit使用教程
2018/09/21 Javascript
webpack4 SplitChunks实现代码分隔详解
2019/05/23 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
Node.js中文件系统fs模块的使用及常用接口
2020/03/06 Javascript
vue组件是如何解析及渲染的?
2021/01/13 Vue.js
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
零基础写python爬虫之神器正则表达式
2014/11/06 Python
编写Python的web框架中的Model的教程
2015/04/29 Python
python转换字符串为摩尔斯电码的方法
2015/07/06 Python
磁盘垃圾文件清理器python代码实现
2020/08/24 Python
python之验证码生成(gvcode与captcha)
2019/01/02 Python
墨西哥巴士车票在线购买:ClickBus
2018/03/27 全球购物
"引用"与多态的关系
2013/02/01 面试题
静态变量和实例变量的区别
2015/07/07 面试题
应届毕业生个人求职自荐信
2014/01/06 职场文书
小学生防溺水广播稿
2014/01/12 职场文书
二年级体育教学反思
2014/01/15 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
读书笔记怎么写
2015/07/01 职场文书