小程序倒计时,秒表，读秒，计时器

kingway999

已于 2024-04-30 16:56:17 修改

阅读量466

点赞数 2

文章标签：小程序前端微信小程序

于 2024-04-30 16:18:42 首次发布

本文链接：https://blog.csdn.net/miaohancheng/article/details/138349428

版权

本文介绍了如何在JavaScript中使用Page组件创建一个简单的倒计时功能，通过`onLoad`和`onHide`生命周期函数管理计时器，每当秒数达到设定值时，计时器会自动停止。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Page({
  data: {
    timer: null,
    countDownNum: 10,
    seconds: 0,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {
    this.startCountDown();
  },
  
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    clearInterval(this.timer2);
    this.data.seconds = 0;
  },
  
  //开始计时
  startCountDown() {
    if (this.timer) {
      clearInterval(this.timer)
    }
    this.timer = setInterval(this.startTimer, 1000)
  },
  
//+1秒
  startTimer() {
    if (this.data.seconds > this.data.countDownNum) {
      clearInterval(this.timer);
      this.data.seconds = 0;
      //倒计时结束操作
      return;
    }
    this.setData({
      seconds: this.data.seconds+1
    });
  }
})