jQuery实现发送验证码倒计时60秒

前端HMTL：

<div class="form_box">
  <div class="line mb40">
    <div class="item">手机验证码：</div>
    <div class="cont">
        <!--点击发送验证码后，倒计时class="count" style="block" -->
        <p class="code">
        <input type="text" value="" class="input_text">
            <span class="info">
               <em style="display: none" class="count">（60）秒后重新发送</em>
               <a href="javascript:;" class="send" onclick="sendValidCode();">发送验证码</a>
            </span>
        </p>
    </div>
  </div>
  <!--消息提示区域 -->
  <div style="visibility: hidden; margin-left: 192px; height: 30px;" id="errorNotice">
  </div>
  <!--设置页面-->
  <div class="line">
    <div class="item"></div>
    <div class="cont">
      <input type="button" onclick="checkValidCode();" value="确 定" class="button01">
    </div>
  </div>
</div>

jQuery实现60秒倒计时：

//发送验证码
function sendValidCode(){
    $(\'#errorNotice\').html(\'\');
    $(\'.input_text\').val(\'\');
    
    $.ajax({
        type: \'post\',
        dataType: "json",
        url: "/Ajax/PhoneAuthen.php",
        data: {
            ajaxMethod: "sendValidCodeNew",
            mtype: "2"
        },
        success: function(data){
            if (data.result > 0) {
            
            }
            else {
                $(\'#errorNotice\').html(\'短信发送失败，请稍后重试！\');
                $(\'#errorNotice\').css(\'visibility\', \'visible\');
            }
        },
        error: function(data){
            $(\'#errorNotice\').html(\'短信发送失败，请稍后重试！\');
            $(\'#errorNotice\').css(\'visibility\', \'visible\');
        }
    });
    
    
    //60秒后重新发送
    var btnSend = $(".send");
    var msg = $(\'.count\');
    btnSend.removeAttr(\'style\').attr(\'style\', \'display:none;\');
    msg.removeAttr(\'style\').attr(\'style\', \'display:block\');
    var left_time = 60;
    var tt = window.setInterval(function(){
        left_time = left_time - 1;
        if (left_time <= 0) {
            window.clearInterval(tt);
            msg.html(\'（60）秒后重新发送\');
            msg.removeAttr(\'style\').attr(\'style\', \'display:none;\');
            btnSend.removeAttr(\'style\').attr(\'style\', \'display:block\');
        }
        else {
            msg.html(\'（\' + left_time + \'）秒后重新发送\');
        }
    }, 1000);
}

 

备注：

visibility:hidden/visible 设置为隐藏/显示(始终占位)

display:不占位