网络编程
位置:首页>> 网络编程>> JavaScript>> javascript实现的简单计时器

javascript实现的简单计时器

作者:hebedich  发布时间:2024-07-05 08:15:43 

标签:javascript,计时器

最近写了很多微信端的互动小游戏,比如下雪花 限时点击 赢取奖品,限时拼图,限时答题等,都是些限时‘游戏'(其实算不上游戏,顶多算是具有一点娱乐性的小互动而已)

上面出现了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 来获取当前时间

以上所述就是本文的全部内容了,希望大家能够喜欢。

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com