在項(xiàng)目開(kāi)發(fā)里，我們經(jīng)常會(huì)遇到發(fā)送驗(yàn)證碼、點(diǎn)擊了之后有60秒倒計(jì)時(shí)的按鈕，很常見(jiàn)卻也很簡(jiǎn)單，但是在寫(xiě)這個(gè)按鈕的時(shí)候有個(gè)別地方還要注意下，今天寫(xiě)出來(lái)，如有問(wèn)題歡迎指正！

完成的效果如下：

為了更快顯示出效果，我把時(shí)間設(shè)成了5秒。按鈕在點(diǎn)擊之后會(huì)出現(xiàn)倒計(jì)時(shí)，同時(shí)按鈕變?yōu)椴豢牲c(diǎn)擊狀態(tài)，樣式也發(fā)生變化，鼠標(biāo)懸浮上的樣子也會(huì)發(fā)生變化。

接下來(lái)我們用代碼來(lái)實(shí)現(xiàn)：

<button class="button" @click="countDown">
 {{content}}
</button>

...

data () {
  return {
   content: '發(fā)送驗(yàn)證碼',  // 按鈕里顯示的內(nèi)容
   totalTime: 60      //記錄具體倒計(jì)時(shí)時(shí)間
  }
},
methods: {
  countDown() {
    let clock = window.setInterval(() => {
      this.total--
      this.content = this.total + 's后重新發(fā)送'
    },1000)
  }
}

在data里加了兩條數(shù)據(jù)，一條用來(lái)記錄時(shí)間，一條用來(lái)盛放倒計(jì)時(shí)按鈕的具體內(nèi)容。在countDown函數(shù)里我們用了setInterval定時(shí)器，每隔一秒totalTime減1，同時(shí)更改按鈕里顯示的內(nèi)容。 在window.setInterval里用了箭頭函數(shù)，因?yàn)樗鼤?huì)自動(dòng)綁定外面的this，所以就不用先存下this了。

效果如下圖：

但是這個(gè)按鈕還有一些問(wèn)題：

點(diǎn)擊了按鈕之后過(guò)了1秒就直接從59秒開(kāi)始倒計(jì)時(shí)了，中間的60不見(jiàn)了
倒計(jì)時(shí)的時(shí)候還可以點(diǎn)擊
還沒(méi)有清除倒計(jì)時(shí)

接下來(lái)需要繼續(xù)完善countDown函數(shù)來(lái)解決這些問(wèn)題。

countDown () {
 this.content = this.totalTime + 's后重新發(fā)送' //這里解決60秒不見(jiàn)了的問(wèn)題
 let clock = window.setInterval(() => {
  this.totalTime--
  this.content = this.totalTime + 's后重新發(fā)送'
  if (this.totalTime < 0) {     //當(dāng)?shù)褂?jì)時(shí)小于0時(shí)清除定時(shí)器
    window.clearInterval(clock)
    this.content = '重新發(fā)送驗(yàn)證碼'
    this.totalTime = 60
    }
 },1000)
},

上面的代碼解決了60不見(jiàn)的問(wèn)題，同時(shí)當(dāng)totalTime小于0時(shí)清除同時(shí)器、重新設(shè)置按鈕里的content、將totalTime重置為60以便下次使用。

倒計(jì)10秒的效果：

發(fā)現(xiàn)bug，多次點(diǎn)擊之后，倒講時(shí)速度變快，這是因?yàn)槊看吸c(diǎn)擊都會(huì)啟動(dòng)一個(gè)setInterval，這些setInterval都會(huì)減少totalTime。解決的方法也很簡(jiǎn)單：簡(jiǎn)單節(jié)流一下就好了，就是第一次點(diǎn)擊按鈕之后讓countDonw這個(gè)函數(shù)的代碼不可執(zhí)行，等到倒計(jì)時(shí)結(jié)束之后才可以再次執(zhí)行。

data () {
  return {
   content: '發(fā)送驗(yàn)證碼',
   totalTime: 10,
   canClick: true //添加canClick
  }
}

...

countDown () {
 if (!this.canClick) return  //改動(dòng)的是這兩行代碼
 this.canClick = false
 this.content = this.totalTime + 's后重新發(fā)送'
 let clock = window.setInterval(() => {
  this.totalTime--
  this.content = this.totalTime + 's后重新發(fā)送'
  if (this.totalTime < 0) {
   window.clearInterval(clock)
   this.content = '重新發(fā)送驗(yàn)證碼'
   this.totalTime = 10
   this.canClick = true  //這里重新開(kāi)啟
  }
 },1000)
}

在data里添加canClick，默認(rèn)是true，如果canClick為true，countDown里的代碼可以執(zhí)行，如果是false就不行。每執(zhí)行一次就將canClick設(shè)為false，而只在倒計(jì)時(shí)結(jié)束的時(shí)候再改為true。這樣剛才的問(wèn)題就沒(méi)有了。

到這里其實(shí)就差不多了，不過(guò)還可以調(diào)整下樣式：

<button class="button" :class="{disabled: !this.canClick}" @click="countDown">
...
.disabled{
 background-color: #ddd;
 border-color: #ddd;
 color:#57a3f3;
 cursor: not-allowed; // 鼠標(biāo)變化
}

效果：

這個(gè)倒計(jì)時(shí)按鈕十分簡(jiǎn)單，但是我第一次寫(xiě)的時(shí)候還是寫(xiě)的很亂，而且那個(gè)時(shí)候還不知道函數(shù)節(jié)流的概念。

總結(jié)

以上所述是小編給大家介紹的Vue寫(xiě)一個(gè)簡(jiǎn)單的倒計(jì)時(shí)按鈕功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論