验证码倒计时60秒

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xuanzhangran/article/details/70314460

实现效果：
1：开始效果：

2：点击获取验证码之后：

实现代码如下：
前台代码：

<span class="personattr">手机号:</span>${business.bdMobile}
  <input type="button" class="changepass" onclick="getCode(${business.bdMobile})" value="获取验证码" id="J_getCode"/>
    <button class="changepass" id="J_resetCode" style="display:none;">
        <span id="J_second"></span>秒后获取
    </button>

js代码：

//调用生成验证码的接口：
 function getCode(phone){
         $.ajax({
                url:"/BusinessInfo/getRegistCode.html",
                type:"post",
                dataType:"json",
                async:true,
                cache:false,
                data:{bdMobile:phone},
                success:function(obj){
                    resetCode(); //调用验证码倒计时
                }
            });
 }

//倒计时代码
 function resetCode(){
    $('#J_getCode').hide();
    $('#J_second').html('60');
    $('#J_resetCode').show();
    var second = 60;//倒计时时间
    var timer = null;
    timer = setInterval(function(){
        second -= 1;
        if(second >0 ){
            $('#J_second').html(second);
        }else{
            clearInterval(timer);
            $('#J_getCode').show();
            $('#J_resetCode').hide();
        }
    },1000);
 }