1. 程式人生 > >按鈕動態倒計時的實現

按鈕動態倒計時的實現

<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定義為全域性變數。