微信小程序 倒计时

微信小程序

计时器 倒计时

文章目录

• 微信小程序 定时器中的 倒计时用法

1.data 声明变量

代码如下（示例）：

  /**

   * 页面的初始数据

   */

  data: {

    // 时间 需要设置是 分

    duration: '',

    // 设置定时器

    loanTime: '',

    // 存放时间

    storage_time: '',

  },

2.倒计时方法

代码如下（示例）：

  // 倒计时
  countdown: function () {

    const $this = this

    var storage_time = $this.data.storage_time

    $this.data.loanTime =

      setInterval(function () {

        if (storage_time == 1000) {

          // 定时器要提前 1s 进行时间到了的操作 否者会出 bug

          // 时间到了 之后的操作
                
          // 清除 定时器
          clearInterval($this.data.loanTime)

        }

        storage_time = storage_time - 1000

        // 秒

        let min = Math.floor(storage_time / 60000);

        // 分

        let sec = Math.floor(storage_time / 1000 % 60);

        // 剩下的根据需求 来加

        let times = min + ":" + sec + " ";

        $this.setData({

          clock: times

        })
      // 1000ms = 1s 定时器 每1s 进行一次操作

      }, 1000);

  },

---

3.生命周期调用

 /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    clearInterval(this.data.loanTime)
    this.countdown()
  },