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 相关文章推荐
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
Sep 08 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
基于vue2.0+vuex的日期选择组件功能实现
Mar 13 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
Vue-cli Eslint在vscode里代码自动格式化的方法
Feb 23 Javascript
工作中常用到的ES6语法
Sep 04 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
javascript递归函数定义和用法示例分析
Jul 22 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 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搜索文件程序分享
2015/10/30 PHP
yii2高级应用之自定义组件实现全局使用图片上传功能的方法
2016/10/08 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
jQuery实现带分组数据的Table表头排序实例分析
2015/11/24 Javascript
JavaScript Date对象详解
2016/03/01 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
2017/02/22 Javascript
JavaScript队列的应用实例详解【经典数据结构】
2017/04/12 Javascript
Angular4学习笔记之新建项目的方法
2017/07/18 Javascript
jQuery解析json格式数据示例
2018/09/01 jQuery
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
跟老齐学Python之集合(set)
2014/09/24 Python
asyncio 的 coroutine对象 与 Future对象使用指南
2016/09/11 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
python调用c++传递数组的实例
2019/02/13 Python
Python对接六大主流数据库(只需三步)
2019/07/31 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
Ubuntu 20.04安装Pycharm2020.2及锁定到任务栏的问题(小白级操作)
2020/10/29 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
用Python自动清理电脑内重复文件,只要10行代码(自动脚本)
2021/01/09 Python
全球度假村:Club Med
2017/11/27 全球购物
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
澳大利亚买卖正宗二手奢侈品交易平台:Luxe.It.Fwd
2019/10/16 全球购物
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
销售总经理岗位职责
2014/03/15 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
村居抓节水倡议书
2014/05/19 职场文书
保护环境标语
2014/06/09 职场文书
农业项目建议书
2014/08/25 职场文书
2014教师党员自我评议总结
2014/09/19 职场文书
普通党员整改措施
2014/10/24 职场文书
男方婚前保证书
2015/02/28 职场文书