微信小程序 寫一個獲取驗證碼 及setInterval 使用基本方法

<!--index.wxml-->
<view class="container">
  <view class="container_content">
    
    <view class="content_time">{{time}}S</view>
    
    <view  class="content_btn">
      <button class="btn_start" bindtap="startTap">開始</button>
      <button class="btn_stop" bindtap="stopTap">停止</button>
      <button class="btn_restart"  bindtap="restartTap">重新開始</button>
    </view>
   
  </view>
</view>

/**index.wxss**/
.container {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
}
.container_content {
  height: 100%;
  width: 100%;
  margin-top:40%;
  text-align: center;
}

.content_time {
  color: forestgreen;
  font-size: 50rpx;
}

.btn_start {
  width: 30%;
  text-align: center;
  background-color: green;
}

.btn_stop {
  width: 30%;
  text-align: center;
  background-color: red;
}

.btn_restart {
  width: 30%;
  text-align: center;
  background-color: darkcyan;
}

//index.js

Page({
    data: {
      time: 60,         //初始時間
      interval: ""      //定時器
    },
    
   /**
     * 開始倒計時
    */
   startTap:function () {
      var that = this;
      that.init(that);          //這步很重要，沒有這步，重復點擊會出現多個定時器
      var time = that.data.time;
      console.log("倒計時開始")
      var interval = setInterval(function () {
         time--;
         that.setData({
            time: time
         })
            if (time==0){           //歸0時回到60
            that.restartTap();
            }
      },100)
      
      that.setData({
         interval:interval
      })
   },
 
   /**
     * 暫停倒計時
    */
   stopTap:function () {
      var that = this;
      console.log("倒計時暫停")
      that.clearTimeInterval(that)
   },
   
   /**
     * 重新倒計時
    */
   restartTap:function () {
      var that = this;
      that.init(that);
      console.log("倒計時重新開始")
      that.startTap()
   },
   
   /**
     * 初始化數據
    */
   init: function (that) {
        var time = 60;
      var interval = ""
      that.clearTimeInterval(that)
      that.setData({
            time: time,
         interval: interval,
        })
   },
 
   /**
     * 清除interval
    * @param that
    */
   clearTimeInterval: function (that) {
      var interval = that.data.interval;
      clearInterval(interval)
    },
   
   /**
     * 生命周期函數--監聽頁面卸載
     * 退出本頁面時停止計時器
    */
   onUnload:function () {
        var that = this;
        that.clearTimeInterval(that)
   },
 
   /**
     * 生命周期函數--監聽頁面隱藏
     * 在后台運行時停止計時器
    */
   onHide:function () {
        var that = this;
        that.clearTimeInterval(that)
   }
   
})

---------------------
作者：平凡V之路
來源：CSDN
原文：https://blog.csdn.net/qq_36221503/article/details/79732381
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！