小程序倒计时

倒计时是在众多项目中用的比较基础的东西，像考试这种是经常用到的。这个倒计时也是我在学习的过程中慢慢研究的，也有他人提供的思路，废话不多说，直接上代码。

首先是js代码

data:{
    currentTime: '05:00', // 当前时间显示
    timer: null, // 定时器
    curretTime: 0, // 当前时间，初始值为 0 秒
    HideTime: 0, // 上次页面显示的时间戳
},
// 开始倒计时
  startCountdown() {
    // 每隔一秒执行一次
    this.data.timer = setInterval(() => {
       // 每隔一秒让当前时间 +1 秒
      let curretTime = this.data.curretTime + 1;
      if (curretTime > 300) {
        // 这里写的大于300是因为在页面渲染时等于300倒计时会停在00:01
        clearInterval(this.data.timer);
        // 这里的sub()方法是考试答完题提交的方法，具体情况根据自己的代码作修改
        this.sub();
      } else {
        let sTime = 300 - curretTime;
        this.setData({
          curretTime: curretTime,
           // 将用时转成 mm:ss 的形势显示在页面上
          currentTime: this.formatTime(sTime)
        });
      }
    }, 1000);
  },
// 格式化时间为 mm:ss 的形式
  formatTime(time) {
    let minutes = Math.floor(time / 60);
    let seconds = time % 60;
    // 补零操作
    let formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
    let formattedSeconds = seconds < 10 ? '0' + seconds : seconds;
    return formattedMinutes + ':' + formattedSeconds;
  },
// 提交方法
  sub() {
    let that = this;
    if (this.data.timer) {
       // 清除定时器
      clearInterval(this.data.timer);
    }
    let usedTime = this.data.curretTime;
    // 让用时显示小于等于300秒时正常显示，超过则还是显示300秒
    usedTime = this.data.curretTime <= 300 ? this.data.curretTime : 300;
    console.log('用时：', usedTime, '秒');
    let minutes = Math.floor(usedTime / 60);
    let seconds = usedTime % 60;
    let formattedUsedTime = (minutes < 10 ? '0' + minutes : minutes) + ':' + (seconds < 10 ? '0' + seconds : seconds);
    //这步的三元判断是因为小程序在隐藏页面时，我想让倒计时继续走在切回页面时的显示，因为页面切回时会停顿一下才渲染数据，所以才这么判断显示
    let currentTime = usedTime <= 300 ? (usedTime == 300 ? '00:00' : this.data.currentTime) : this.data.currentTime;
    // 在页面上渲染用时
    this.setData({
      usedTime: formattedUsedTime,
      currentTime: currentTime
    });
    //.....
    // 作其他操作
  },
 onShow: function () {
    // 页面显示时开始倒计时
    // 记录页面显示的时间戳
    let showTime = Date.now()
    let curretTime = this.data.curretTime;
    if (this.data.HideTime > 0) {
      // 计算时间差
      let timeDiff = Math.floor((showTime - this.data.HideTime) / 1000);
      // 更新当前时间
      curretTime += timeDiff;
    }
    this.setData({
      curretTime: curretTime
    });
    
  },

  onHide: function () {
    // 页面隐藏时记录时间
    this.data.HideTime = Date.now();
    clearInterval(this.data.timer);
  },

  onUnload: function () {
    // 页面卸载时清除倒计时
    console.log('页面卸载', this.data.timer);
    if (this.data.timer) {
      clearTimeout(this.data.timer);
      this.data.timer = null;
    }
  },

wxml页面

倒计时

<!-- 倒计时 -->
 倒计时：{{currentTime}}

这是sub()提交时

用时：{{usedTime}}

具体页面布局根据情况自己作修改。

好了，这是我自己的一个小程序倒计时，还有待修改的地方可以留言指出，希望这个倒计时能够帮助大家。转载请标明出处。