首先按鈕基礎的樣式為灰色底:
基礎樣式(也就是禁用下的狀態)
然后是普通樣式,類名rgs-get-code
,同id:
可點擊狀態
js部分:
$('#rgs-get-code').on('click', function() {
var _this = this;
var loopTime = 59;
// 修改樣式
$(_this).prop('disabled', true).removeClass('aui-btn-warning').html('重新獲取(60s)');
// 定時器
var countDown = setInterval(function() {
if (loopTime == 0) {
$(_this).prop('disabled', false).addClass('aui-btn-warning').html('獲取驗證碼');
// 清除定時器
window.clearInterval(countDown);
}else {
$(_this).html('重新獲取(' + loopTime + 's)');
loopTime -= 1;
}
}, 1000);
});
其實是灰常簡單的一個功能,不過定時器要及時清除。