小程序实现计时器功能

下面是“小程序实现计时器功能”的完整攻略：

1. 准备工作

在开始编写计时器功能之前，需要先创建一个小程序项目，并在页面中引入 wx.createInnerAudioContext() 实现计时结束后的声音提示。

2. 计时器实现

2.1 变量定义和初始值设置

首先，需要在 data 中定义计时器相关的变量，例如当前计时器的状态、计时器显示的时间等：

data: {
  status: 0, // 0：未开始，1：进行中，2：已结束
  timer: null, // 计时器对象
  time: 60 // 初始时间
}

2.2 计时器开始和暂停操作

接着，在页面中需要添加开始和暂停计时器的按钮，并在对应的事件函数中编写计时器的逻辑。

开始计时器：

startTimer() {
  let that = this;
  // 如果当前计时器未开始或已结束，开始计时
  if (that.data.status === 0 || that.data.status === 2) {
    that.setData({
      status: 1
    });
    that.data.timer = setInterval(() => {
      that.setData({
        time: that.data.time - 1
      });
      // 当计时结束时，清除计时器并播放结束提示音
      if (that.data.time === 0) {
        clearInterval(that.data.timer);
        that.setData({
          status: 2
        });
        wx.createInnerAudioContext().src = '/audio/end.mp3';
        wx.createInnerAudioContext().play();
      }
    }, 1000)
  }
}

暂停计时器：

pauseTimer() {
  let that = this;
  if (that.data.status === 1) { // 如果当前计时器正在进行中，暂停计时器
    clearInterval(that.data.timer);
    that.setData({
      status: 0
    });
  }
}

2.3 计时器重置操作

最后，添加一个重置计时器的按钮，并在对应的事件函数中实现对计时器相关变量的重置：

resetTimer() {
  let that = this;
  clearInterval(that.data.timer);
  that.setData({
    status: 0,
    timer: null,
    time: 60
  });
}

3. 示例说明

示例一

在一个游戏小程序中，需要添加一个计时器功能，用于限制玩家每次游戏的时间。用户点击“开始游戏”按钮后，计时器开始计时，当计时结束时，游戏结束并跳转到游戏结果页面。

Page({
  data: {
    status: 0,
    timer: null,
    time: 60
  },
  startGame() {
    let that = this;
    if (that.data.status === 0 || that.data.status === 2) {
      that.setData({
        status: 1
      });
      that.data.timer = setInterval(() => {
        that.setData({
          time: that.data.time - 1
        });
        if (that.data.time === 0) {
          clearInterval(that.data.timer);
          that.setData({
            status: 2
          });
          wx.navigateTo({
            url: '/pages/result/result'
          })
        }
      }, 1000)
    }
  },
  pauseGame() {
    let that = this;
    if (that.data.status === 1) {
      clearInterval(that.data.timer);
      that.setData({
        status: 0
      });
    }
  },
  resetGame() {
    let that = this;
    clearInterval(that.data.timer);
    that.setData({
      status: 0,
      timer: null,
      time: 60
    });
  }
})

示例二

在一个健身小程序中，需要添加一个计时器功能，用于记录每个动作持续的时间。用户点击“开始训练”按钮后，计时器开始计时，并显示当前动作名称和剩余时间，当计时结束时，自动开始下一个动作，直到所有动作结束。

Page({
  data: {
    status: 0,
    timer: null,
    time: 30,
    actions: [ // 所有动作列表
      {
        name: '半蹲',
        time: 30
      },
      {
        name: '俯卧撑',
        time: 30
      },
      {
        name: '仰卧起坐',
        time: 30
      }
    ],
    currentAction: {
      name: '',
      time: 0
    }
  },
  startTraining() {
    let that = this;
    if (that.data.status === 0 || that.data.status === 2) {
      that.setData({
        status: 1
      });
      // 设置当前动作
      that.setData({
        currentAction: that.data.actions[0]
      });
      that.data.timer = setInterval(() => {
        that.setData({
          time: that.data.time - 1
        });
        if (that.data.time === 0) {
          clearInterval(that.data.timer);
          that.setData({
            status: 0,
            time: 30,
          });
          // 计时结束后，显示下一个动作
          let index = that.data.actions.indexOf(that.data.currentAction);
          if (index < that.data.actions.length - 1) {
            that.setData({
              currentAction: that.data.actions[index + 1],
              status: 1
            });
          } else {
            wx.showToast({
              title: '训练结束'
            });
          }
        }
      }, 1000)
    }
  },
  pauseTraining() {
    let that = this;
    if (that.data.status === 1) {
      clearInterval(that.data.timer);
      that.setData({
        status: 0
      });
    }
  },
  resetTraining() {
    let that = this;
    clearInterval(that.data.timer);
    that.setData({
      status: 0,
      timer: null,
      time: 30,
      currentAction: {
        name: '',
        time: 0
      }
    });
  }
})