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 相关文章推荐
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 Javascript
javascript 学习笔记(八)javascript对象
Apr 12 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
js实现支持手机滑动切换的轮播图片效果实例
Apr 29 Javascript
JS实现转动随机数抽奖特效代码
Apr 16 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
利用JS生成博文目录及CSS定制博客
Feb 10 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 Javascript
vue项目关闭eslint校验
Mar 21 Javascript
vue实现图片上传功能
May 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扩展开发经验分享
2012/09/06 PHP
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
php中static 静态变量和普通变量的区别
2016/12/01 PHP
jQuery开发者都需要知道的5个小技巧
2010/01/08 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
浮动的div自适应居中显示的js代码
2013/12/23 Javascript
jquerymobile局部渲染的各种刷新方法小结
2014/03/05 Javascript
js分页代码分享
2014/04/28 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
前端分页功能的实现以及原理(jQuery)
2017/01/22 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
JavaScript输入框字数实时统计更新
2017/06/17 Javascript
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
webpack实现一个行内样式px转vw的loader示例
2018/09/13 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
[01:18]PWL开团时刻DAY4——圣剑与抢盾
2020/11/03 DOTA
Python安装Imaging报错:The _imaging C module is not installed问题解决方法
2014/08/22 Python
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
使用python获取(宜宾市地震信息)地震信息
2019/06/20 Python
python实现淘宝购物系统
2019/10/25 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
财务会计专业毕业生自荐信
2013/10/02 职场文书
硕士研究生个人求职信
2013/12/04 职场文书
小学爱国卫生月活动总结
2014/06/30 职场文书
田径运动会广播稿
2015/08/19 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书