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 AspxButton的客户端操作
Jun 26 Javascript
javascript 事件绑定问题
Jan 01 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
JQuery for与each性能比较分析
May 14 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
JS+CSS相对定位实现的下拉菜单
Oct 06 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
原生javascript实现文件异步上传的实例讲解
Oct 26 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(3) php 函数
2010/02/15 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
深入解析php中的foreach函数
2013/08/31 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
用javascript做拖动布局的思路
2008/05/31 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
js时间控件只显示年月
2017/01/08 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
JS实现的简单表单验证功能完整实例
2017/10/14 Javascript
JavaScript设计模式之享元模式实例详解
2019/01/17 Javascript
layui关闭层级、简单监听的实例
2019/09/06 Javascript
vue-resourc发起异步请求的方法
2020/02/11 Javascript
python中xrange和range的区别
2014/05/13 Python
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
跟老齐学Python之永远强大的函数
2014/09/14 Python
使用Python操作MySQL的一些基本方法
2015/08/16 Python
python 3.0 模拟用户登录功能并实现三次错误锁定
2017/11/01 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
世界上最值得信赖的多日游在线市场:TourRadar
2018/07/20 全球购物
卡骆驰英国官网:Crocs英国
2019/08/22 全球购物
水产养殖学应届生求职信
2013/09/29 职场文书
材料物理专业个人求职信
2013/12/15 职场文书
社会实践心得体会
2014/01/03 职场文书
绿化先进工作者事迹材料
2014/01/30 职场文书
教育基金募捐倡议书
2014/05/14 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
办公室文员岗位职责
2015/02/04 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
Redis可视化客户端小结
2021/06/10 Redis
Spring Bean是如何初始化的详解
2022/03/22 Java/Android
《进击的巨人》新联动CM 兵长强势出击兽巨人
2022/04/05 日漫
Python Matplotlib绘制动画的代码详解
2022/05/30 Python
Go调用Rust方法及外部函数接口前置
2022/06/14 Golang
基于Python编写一个监控CPU的应用系统
2022/06/25 Python