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 相关文章推荐
IE6与IE7中,innerHTML获取param的区别
Mar 15 Javascript
JQuery获取文本框中字符长度的代码
Sep 29 Javascript
select多选 multiple的使用示例
Jun 16 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
JavaScript实现选中文字提示新浪微博分享效果
Jun 15 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
AngularJS中table表格基本操作示例
Oct 10 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
浅谈react性能优化的方法
Sep 05 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
AJAX检测用户名是否存在的方法
Mar 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
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
php中使用base HTTP验证的方法
2015/04/20 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
js调用css属性写法
2013/09/21 Javascript
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
2016/01/27 Javascript
JS定义类的六种方式详解
2016/05/12 Javascript
Angular中$cacheFactory的作用和用法实例详解
2016/08/19 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
微信公众号获取用户地理位置并列出附近的门店的示例代码
2019/07/25 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
jQuery--遍历操作实例小结【后代、同胞及过滤】
2020/05/22 jQuery
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
[26:24]完美副总裁、DOTA2负责人蔡玮专访:电竞如人生
2014/09/11 DOTA
Python heapq使用详解及实例代码
2017/01/25 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
python使用配置文件过程详解
2019/12/28 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
香港唯港荟酒店预订:Hotel ICON
2018/03/27 全球购物
人事行政主管岗位职责
2013/12/22 职场文书
安全生产活动月方案
2014/03/09 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
个人收入证明范本
2014/09/18 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python
python语言中pandas字符串分割str.split()函数
2022/08/05 Python