在專案開發裡，我們經常會遇到傳送驗證碼、點選了之後有60秒倒計時的按鈕，很常見卻也很簡單，但是在寫這個按鈕的時候有個別地方還要注意下，今天寫出來，如有問題歡迎指正！
完成的效果如下：
為了更快顯示出效果，我把時間設成了5秒。按鈕在點選之後會出現倒計時，同時按鈕變為不可點選狀態，樣式也發生變化，滑鼠懸浮上的樣子也會發生變化。
接下來我們用**來實現：?1
2345
6789
1011
1213
1415
1617
1819
20
}
...
data ()
},
methods: ,1000)
}
}
在data裡加了兩條資料，一條用來記錄時間，一條用來盛放倒計時按鈕的具體內容。在countdown函式裡我們用了setinterval定時器，每隔一秒totaltime減1，同時更改按鈕裡顯示的內容。 在window.setinterval裡用了箭頭函式，因為它會自動繫結外面的this，所以就不用先存下this了。
效果如下圖：
但是這個按鈕還有一些問題：
點選了按鈕之後過了1秒就直接從59秒開始倒計時了，中間的60不見了
倒計時的時候還可以點選
還沒有清除倒計時
接下來需要繼續完善countdown函式來解決這些問題。?1
2345
6789
1011
12countdown ()
},1000)
},
上面的**解決了60不見的問題，同時當totaltime小於0時清除同時器、重新設定按鈕裡的content、將totaltime重置為60以便下次使用。
倒計10秒的效果：
發現bug，多次點選之後，倒講時速度變快，這是因為每次點選都會啟動乙個setinterval，這些setinterval都會減少totaltime。解決的方法也很簡單：簡單節流一下就好了，就是第一次點選按鈕之後讓countdonw這個函式的**不可執行，等到倒計時結束之後才可以再次執行。?1
2345
6789
1011
1213
1415
1617
1819
2021
2223
2425
data ()
}
...
countdown ()
},1000)
}
在data裡新增canclick，預設是true，如果canclick為true，countdown裡的**可以執行，如果是false就不行。每執行一次就將canclick設為false，而只在倒計時結束的時候再改為true。這樣剛才的問題就沒有了。
到這裡其實就差不多了，不過還可以調整下樣式：
class="效果：button
" :class="
" @click="
countdown
">...
.disabled
另一種方式，通過v-show來展示
div class="login_list
">
class="
login_title
">簡訊驗證碼：
class="
auth_input
" type="
text
" placeholder="
輸入驗證碼
" />
/*上面兩行可忽略
*//*
* 下面兩行是本次重點，通過v-show來控制該顯示哪一行
* 首先顯示.auth_text_blue 通過點選事件getauthcode來獲取手機驗證碼。
* 同時改變sendauthcode的值，隱藏自身，顯示倒計時.auth_text
* */"
sendauthcode
"class="
auth_text auth_text_blue
" @click="
getauthcode
">獲取驗證碼
"!sendauthcode
"class="
auth_text
"> class="
auth_text_blue
">} 秒之重新傳送驗證碼
var vm = newvue(,
methods:
}, 1000
); }
}});
記錄乙個簡單的倒計時
參考了這篇 乙個簡單的分和秒的倒計時 import time defcountdown m while true print d分鐘倒計時開始 m for minutes in range m,1,1 if minutes 0 break for seconds in range 59 1,1 ti...
乙個簡單的倒計時js外掛程式
接收的引數end是必須傳的，格式是 分隔的日期字串，start是可選的，不傳就是從現在開始倒計時，callback也是可選的，到倒計時接收時執行自定義的函式。countdown function return var day parseint time 86400,10 var hour parse...
設定乙個活動倒計時
需求 寫乙個活動倒計時功能 獲取當前時間戳 const current time math.round new date gettime 1000 tostring 大概過程 後台會返回乙個活動開始時間的時間戳，你需要把活動時間戳減去當前時間戳，再將剩下的轉換為時分秒 初始化的時候 定義乙個定時器 ...