javascript_javascript 기술로 구현된 간단한 타이머

저는 최근 WeChat에서 눈꽃송이, 상을 받기 위한 시간 제한 클릭, 시간 제한 퍼즐, 시간 제한 질문 답변 등 많은 대화형 미니 게임을 작성했습니다. 모두 시간 제한 '게임'입니다. ' (실제로는 게임으로 간주되지 않으며 기껏해야 약간 재미있습니다.) 단지 작은 상호작용일 뿐입니다)

위의 4가지 시간 제한이 있습니다. 네, 그렇습니다. 여기에 기록된 것은 최근 작성된 '타이머'입니다...

글쎄, 타이머는 단 하나의 setInterval 또는 setTimeout으로 구현할 수 있으며 코드는 10줄을 초과하지 않습니다!

하지만 문제를 찾는 사고방식으로 재사용 가능한 타이머를 작성해 보는 것은 어떨까요?

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&#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;
})(); 

전화 방법:

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에 기록되기 전의 문자열 처리입니다

카운트다운이 카운트다운인지 여부에 관계없이 기본값은 앞으로입니다

timerO.timeV를 통해 현재 시간을 알 수 있습니다

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.