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的键盘事件修改代码
Feb 24 Javascript
在JS中解析HTML字符串示例代码
Apr 16 Javascript
在页面加载完成后通过jquery给多个span赋值
May 21 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
Jan 05 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
jQuery Ajax传值到Servlet出现乱码问题的解决方法
Oct 09 Javascript
Angular 2.x学习教程之结构指令详解
May 25 Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 Javascript
微信小程序通过js实现瀑布流布局详解
Aug 28 Javascript
使用preload预加载页面资源时注意事项
Feb 03 Javascript
如何手写简易的 Vue Router
Oct 10 Javascript
js实现淘宝浏览商品放大镜功能
Oct 28 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 CURL获取cookies模拟登录的方法
2013/11/04 PHP
支持中文的PHP按字符串长度分割成数组代码
2015/05/17 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
javascript Select标记中options操作方法集合
2008/10/22 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
事件绑定之小测试  onclick &amp;&amp; addEventListener
2011/07/31 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
原生JS实现美图瀑布流布局赏析
2015/09/07 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
2015/11/29 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
微信小程序富文本渲染引擎的详解
2017/09/30 Javascript
angularjs实现天气预报功能
2020/06/16 Javascript
微信小程序实现简易table表格
2020/06/19 Javascript
layui加载数据显示loading加载完成loading消失的实例代码
2019/09/23 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
关于vue的列表图片选中打钩操作
2020/09/09 Javascript
python对数组进行反转的方法
2015/05/20 Python
python回调函数中使用多线程的方法
2017/12/25 Python
python构建深度神经网络(DNN)
2018/03/10 Python
django如何连接已存在数据的数据库
2018/08/14 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
python 消除 futureWarning问题的解决
2019/12/25 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
基于Python采集爬取微信公众号历史数据
2020/11/27 Python
微软中国官方商城:Microsoft Store中国
2018/10/12 全球购物
物理研修随笔感言
2014/02/14 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
财务会计大学生自我评价
2014/04/09 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
2016优秀大学生个人事迹材料范文
2016/03/01 职场文书
Django项目如何获得SSL证书与配置HTTPS
2021/04/30 Python
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android