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 相关文章推荐
js去除空格的12种实用方法
Nov 08 Javascript
JS实现遮罩层效果的简单实例
Nov 12 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
Mar 06 Javascript
JS+CSS实现TreeMenu二级树形菜单完整实例
Sep 18 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
js使用highlight.js高亮你的代码
Aug 18 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
在 Node.js 中使用 async 函数的方法
Nov 17 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 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
Zend的MVC机制使用分析(二)
2013/05/02 PHP
常用PHP框架功能对照表
2014/10/23 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
thinkphp使用phpmailer发送邮件的方法
2014/11/24 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
Gambit vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
2009/08/28 Javascript
JS实现的仿淘宝交易倒计时效果
2015/11/27 Javascript
javascript求日期差的方法
2016/03/02 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
JS中闭包的经典用法小结(2则示例)
2016/12/28 Javascript
详解Vue自定义过滤器的实现
2017/01/10 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
微信小程序实现弹出菜单功能
2018/06/12 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
[01:18:21]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第一场 6.2
2018/06/03 DOTA
[01:42]DOTA2 – 虚无之灵
2019/08/25 DOTA
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
新手入门学习python Numpy基础操作
2020/03/02 Python
利用 PyCharm 实现本地代码和远端的实时同步功能
2020/03/23 Python
学习python需要有编程基础吗
2020/06/02 Python
python自定义函数def的应用详解
2020/06/03 Python
Python之Matplotlib文字与注释的使用方法
2020/06/18 Python
优秀员工推荐信
2014/05/10 职场文书
企业人事任命书
2014/06/05 职场文书
班训口号大全
2014/06/18 职场文书
2014年纳税评估工作总结
2014/12/23 职场文书
小学教师师德师风自我评价
2015/03/04 职场文书
孔子观后感
2015/06/08 职场文书
小学运动会加油词
2015/07/18 职场文书
《给予树》教学反思
2016/03/03 职场文书
Pytorch 如何加速Dataloader提升数据读取速度
2021/05/28 Python
使用SQL实现车流量的计算的示例代码
2022/02/28 SQL Server
A22国内电台短波广播频率表
2022/05/10 无线电