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:不占位