短信验证码前端如何写

HTML:

<div class="form-group">
    {!! Form::label('phone','新手机号',['class' => 'col-md-2 control-label']) !!}
    <div class="col-md-5">
        {!! Form::text('phone',null,['class'=>'form-control']) !!}
    </div>
    <div class="col-md-4">
        <p class="form-control-static">
        <a id="send-captcha" href="#">发送验证码</a>
        </p>
    </div>
</div>

JS:

<script>
    // 定义按钮btn
    var btn = $("#send-captcha");
         
    // 定义发送时间间隔(s)
    var SEND_INTERVAL = 60;
    var timeLeft = SEND_INTERVAL;
    
    /**
    * 绑定btn按钮的监听事件
    */
    var bindBtn = function(){
        btn.click(function(){
            // 需要先禁用按钮（为防止用户重复点击）
            btn.unbind('click');
            btn.attr('disabled', 'disabled');
            $.ajax({
                // ajax接口调用...
            })
            .done(function () {
                alert('发送成功');
                //成功
                timeLeft = SEND_INTERVAL;
                timeCount();                
            })
            .fail(function () {
                //失败，弹窗
                alert('发送失败');

                // ** 重要：因为发送失败，所以要恢复发送按钮的监听 **
                bindBtn();
                btn.remove('disabled');
            });
        })
    }           
    
    /**
    * 重新发送计时
    **/ 

var timeCount = function() {
    window.setTimeout(function() {
        if(timeLeft > 0) {
            timeLeft -= 1;
            btn.html(timeLeft + "后重新发送");
            timeCount();
        } else {
            btn.html("重新发送");
            bindBtn();
        }
    }, 1000);
}