发送验证码按钮读秒效果

本文写一下自己在用的发送验证码按钮点击读秒效果

思路大致为一个盒子里面包着两个按钮，点击获取验证码按钮后，该按钮隐藏，显示读秒按钮显示，这样就很简单的解决了读秒过程中按钮点击触发事件问题，读秒完成后，读秒按钮隐藏，点击获取验证码按钮显示，又可以点击了，具体实现如下：

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);
};

此处仅贴了读秒相关的代码，具体的业务逻辑还请自行补充，如有表述不准确之处，欢迎指正，欢迎补充，感谢阅读。