該插件依賴於jquery,用於發送短信驗證碼後的60秒倒計時:
下載完整代碼: 下載
下載後的完整實例包括:
插件完整源碼
countdown.js:
$(function(){
$(".captchaBtn").html('獲取驗證碼').on("click", function(){
var that = $(this);
var seconds = 60;
that.attr("disabled", true);
that.html(seconds+'秒');
let promise = new Promise((resolve, reject) => {
let setTimer = setInterval(
() => {
seconds -= 1;
// console.info('倒計時:' + seconds);
that.html(seconds+'秒');
if (seconds <= 0) {
that.html('獲取驗證碼');
resolve(setTimer)
}
}
, 1000)
})
promise.then((setTimer) => {
// console.info('清除');
clearInterval(setTimer);
that.attr("disabled", false);
})
})
});
如何使用
- 引入插件
<script src="jquery-2.1.1.min.js" type="text/javascript"></script> <script src="countdown.js" type="text/javascript"></script>
需要依賴jquery
- 在"獲取驗證碼"按鈕上添加 class="captchaBtn"
<button class="captchaBtn"></button>
ok,使用非常簡單