精准秒表计时器实现---基于js

改秒表具有以下四个功能

在页面加载出时：开始计时
格式化显示时间 00:00
只有在时间更新时才更新视图
防止多次重复开启定时

javascript 复制代码

page({

 date:{

    timer:null,
    starttime:0,
    gametime:"00:00"
}

    startTimer(){
    if(timer) return;//如果已经开启时间，直接返回避免重复开启
    
    const startTime=Date.now()-this.calcTlapsed();//校准时间:当前秒数-已流逝秒数
    this.Date({ startTime });//保存
    
    const loop=()=>{
        //计算流逝的秒数
        const elasped=Math.floor((Date.now()-this.data.startTime)/1000);
          
       const min=Math.floor(elasped/60);//计算分钟
       const sec=elasped%60;//计算秒钟
       const gameTime=(min<10?"0"+min:min)+":"+(sec<10?"0"+sec:sec);//格式化
        
        if(gameTime!=this.data.gameTime)
        {
            setData({gameTime});//只有时间变化时，才更新视图，减少渲染。
        }
        this.data.timer=setTimeout(loop,1000)；//1s启动一次loop函数
  }；
         this.data.timer=setTimeout(loop,1000)；//首次调用
}，
    
    calcElasped(){

        const {startTime}=this.data;
        if(!startTime) return 0;/如果还没有开始计时，返回0
        return Math.floor((Date.now()-startTime)/1000);
    },

    stopTimer()
   {
        if(this.data.timer)
        {
            clearTimeout(this.data.timer);
        }
        this.data.timer=null;
   },

})

这段代码和核心在于如何确定好开始的时间，使用date.now()返回。当事件发生时，调用该函数就会返回当前时间，并把该值存进startTimer变量中。确定好事件发生的时间之后，就要计算事件消耗的时间是多少了。调用Date.now()-startTime获取该事件消耗的时间，这样就可以灵活计算出事件开始的时间了（校准）。

之所以要更新事件开始的时间是因为如果程序切换到后台之后，会导致计时暂停，当再次回到页面之后会发现计的时间明显偏少，所以采用记录事件消耗的时间来推算出开始事件的时间点（校准后），就不会出现时间少记的情况了。

计算公式：总时间-该事件耗时的时间=校准后事件开始的时间。