按鈕動態倒計時的實現
阿新 • • 發佈:2018-11-22
<script> sendMessage($("#checkValPho").html(), $(".getVcodePho").attr("id")); var InterValObj; //timer變數,控制時間 var count = 60; //間隔函式,1秒執行 var curCount;//當前剩餘秒數 var timerObj;//id變數 function sendMessage(phone, id) { curCount = count; timerObj = id; //設定button效果,開始計時 $("#" + id).attr("disabled", "true"); InterValObj = window.setInterval(SetRemainTime, 1000); //啟動計時器,1秒執行一次 //請求後臺傳送驗證碼 //userinfo.sendPhoneCode(phone); } //timer處理函式 function SetRemainTime() { if (curCount == 0) { window.clearInterval(InterValObj);//停止計時器 $("#" + timerObj).removeAttr("disabled");//啟用按鈕 $("#" + timerObj).text("重新發送驗證碼"); } else { curCount--; $("#" + timerObj).val(curCount + "秒後可重新發送"); $("#" + timerObj).html(curCount + "秒後可重新發送"); } } </script>
這裡的sendMessage函式有phone和id兩個引數,因為業務邏輯稍有些複雜,彈出頁面較多,也就出現了需要對不同id的電話號傳送驗證碼的情況,可以根據具體情況需要進行調整。
需要注意的是SetRemainTime函式不能有引數,所以把curCount,timerObj定義為全域性變數。