javascript實現(xiàn)的簡單計時器

更新時間：2015年07月19日 11:16:33 投稿：hebedich

計時器提供了一個可以將代碼片段異步延時執(zhí)行的能力，javascript生來是單線程的（在一定時間范圍內(nèi)僅一部分js代碼能運行），計時器為我們提供了一種避開這種限制的方法，從而開辟了另一條執(zhí)行代碼的蹊徑。

最近寫了很多微信端的互動小游戲，比如下雪花限時點擊贏取獎品，限時拼圖，限時答題等，都是些限時‘游戲'（其實算不上游戲，頂多算是具有一點娛樂性的小互動而已）

上面出現(xiàn)了4個限時，對，沒錯，這里記錄的就是最近寫的 ‘計時器' ...

恩，計時器就一個setInterval 或 setTimeout 即可實現(xiàn) ，代碼不會超過十行！

但是不防抱著沒事找事的心態(tài)，來寫個能復用的計時器

1.能倒計時也能順計時

2.復位、暫停、停止，啟動功能

//計時器
window.timer = (function(){
  function mod(opt){
    //可配置參數(shù) 都帶有默認值
    //必選參數(shù)
    this.ele = typeof(opt.ele)=='string'?document.getElementById(opt.ele):opt.ele;//元素
    //可選參數(shù)
    this.startT = opt.startT||0;//時間基數(shù)
    this.endT = opt.endT=='undefined'?24*60*60:opt.endT;//結(jié)束時間 默認為一天
    this.setStr = opt.setStr||null;//字符串拼接
    this.countdown = opt.countdown||false;//倒計時
    this.step = opt.step||1000;
    //不可配置參數(shù)
    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;
})();

調(diào)用方式：

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是計數(shù)器計算的當前時間寫入ele前的字符串處理

countdown是否為倒計時默認為順計時

可以通過 timerO.timeV 來獲取當前時間

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章:

相關(guān)文章

JavaScript中發(fā)出HTTP請求最常用的方法
JavaScript具有很好的模塊和方法來發(fā)送可用于從服務器端資源發(fā)送或接收數(shù)據(jù)的HTTP請求。這篇文章主要介紹了JavaScript中發(fā)出HTTP請求最常用的方法,需要的朋友可以參考下
2018-07-07
一文詳解axios四種傳參方式及后端接參
在開發(fā)的過程中,我們會經(jīng)常使用到axios進行數(shù)據(jù)的交互,這篇文章主要給大家介紹了關(guān)于axios四種傳參方式及后端接參的相關(guān)資料,文中給出了詳細的代碼示例,需要的朋友可以參考下
2023-10-10
js數(shù)組操作方法總結(jié)(必看篇)
下面小編就為大家?guī)硪黄猨s數(shù)組操作方法總結(jié)(必看篇)。小編覺得挺不錯的，希望對大家有所幫助。一起跟隨小編過來看看吧，祝大家游戲愉快哦
2016-11-11
js 實現(xiàn)碰撞檢測的示例
這篇文章主要介紹了js 實現(xiàn)碰撞檢測的示例，幫助大家更好的制作js特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下
2020-10-10
js定義類或?qū)ο蟮慕榻B，需要的朋友可以參考下
2012-08-08