Pemasa mudah dilaksanakan dalam kemahiran javascript_javascript

Baru-baru ini saya telah menulis banyak permainan mini interaktif di WeChat, seperti kepingan salji, klik masa terhad untuk memenangi hadiah, teka-teki masa terhad, soalan jawapan masa terhad, dll. Semuanya adalah permainan masa terhad ' (sebenarnya tidak dianggap permainan, paling banyak ia agak menghiburkan) Hanya interaksi kecil)

Terdapat 4 had masa yang disenaraikan di atas, ya, betul, apa yang direkodkan di sini adalah 'pemasa' yang ditulis baru-baru ini...

Nah, pemasa boleh dilaksanakan dengan hanya satu setInterval atau setTimeout, dan kod tidak akan melebihi sepuluh baris!

Tetapi mengapa tidak menulis pemasa boleh guna semula dengan mentaliti mencari masalah?

1. Boleh mengira mundur dan mengira ke hadapan

2. Tetapkan semula, jeda, berhenti, mulakan fungsi

//计时器
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&#63;--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;
})(); 

Kaedah panggilan:

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';
      }
    });

Kaedah setStr yang diluluskan di sini ialah pemprosesan rentetan sebelum masa semasa yang dikira oleh kaunter ditulis kepada ele

Sama ada kira detik ialah kira detik, lalai adalah ke hadapan

Anda boleh mendapatkan masa semasa melalui timerO.timeV

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.