發送驗證碼按鈕讀秒效果

本文寫一下自己在用的發送驗證碼按鈕點擊讀秒效果

思路大致為一個盒子里面包着兩個按鈕，點擊獲取驗證碼按鈕后，該按鈕隱藏，顯示讀秒按鈕顯示，這樣就很簡單的解決了讀秒過程中按鈕點擊觸發事件問題，讀秒完成后，讀秒按鈕隱藏，點擊獲取驗證碼按鈕顯示，又可以點擊了，具體實現如下：

dom結構如下：

<div class="btnBox">
    <a id="moBtn" href="javascript:;" onclick="sendMsgCode()">免費獲取驗證碼</a>
    <a id="secondShow" href="javascript:;"></a>
</div>

js代碼如下：

var countdown=10;  // 時長 s
// 獲取驗證碼按鈕點擊事件
function sendMsgCode() {
        $("#secondShow").css('display','block');
        $("#moBtn").css('display','none');
        $("#secondShow").html('重新發送('+countdown+'s)');
        var timer = setInterval(function () {
            if (countdown == 0) {
                clearInterval(timer);
                $("#secondShow").css('display','none');
                $("#moBtn").css('display','block');
                countdown = 10;
                console.log(countdown);
            }
            $("#secondShow").html('重新發送('+(countdown-1)+'s)');
            countdown--;
        }, 1000);
};

此處僅貼了讀秒相關的代碼，具體的業務邏輯還請自行補充，如有表述不准確之處，歡迎指正，歡迎補充，感謝閱讀。