之前寫過一個計時函式，有計算誤差，但是驗證碼的60秒倒計時可以忽略這一點點誤差。直接上程式碼。

<template>
  <div class="captcha-row">
    <input class="captcha-input" placeholder="輸入驗證碼" auto-focus />
    <div v-if="showtime===null" class="captcha-button" @click="send">
      獲取驗證碼
    </div>
    <div v-else
 
 class="captcha-button">
      {{showtime}}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 計時器,注意需要進行銷燬
      timeCounter: null,
      // null 則顯示按鈕 秒數則顯示讀秒
      showtime: null
    }
  },
  methods: {
    // 倒計時顯示處理
    countDownText(
 
s) {
      this.showtime = `${s}s後重新獲取`
    },
    // 倒計時 60秒 不需要很精準
    countDown(times) {
      const self = this;
      // 時間間隔 1秒
      const interval = 1000;
      let count = 0;
      self.timeCounter = setTimeout(countDownStart, interval);
      function countDownStart() {
        if (self.timeCounter ==
 
 null) {
          return false;
        }
        count++
        self.countDownText(times - count + 1);
        if (count > times) {
          clearTimeout(self.timeCounter)
          self.showtime = null;
        } else {
          self.timeCounter = setTimeout(countDownStart, interval)
        }
      }
    },
    send() {
      this.countDown(60);
    }
  },
}
</script>

<style lang="less" scoped>
.captcha-row {
  display: flex;
  .captcha-button {
    background: #048fff;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rpx 8rpx;
    width: 320rpx;
    border-radius: 4rpx;
  }
}
</style>