前端短信验证码60秒只能点击一次怎么实现？

      <ul class="sign_up_list">
            <li class="newinput" ng-show="show_signup_code">
              <span class="input-text">
                  姓名:
              </span>
              <input type="text" placeholder="姓名" name="nickname" class="nickname ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" style="">
          </li>
          <li class="newinput" ng-show="show_signup_code">
              <span class="input-text">
                  手机号码:
              </span>
              <input type="text" placeholder="手机号码" name="username" class="username ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" style="">
          </li>
             <li class="newinput input_iphone_code">
              <span class="input-text">
                  验证码:
              </span>
              <input type="text" placeholder="短信验证码" name="phonecode" class="phonecode ng-pristine ng-valid ng-empty ng-touched" style="">
              <span class="code_btn ng-binding"  onclick ="return get_svg();">
                  获取验证码
              </span>
          </li>

          <li class="newinput">
              <span class="input-text">
                  密码:
              </span>
              <input type="password" placeholder="密码" name="upwd" required="" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" style="">
          </li>
          <li class="newinput">
              <span class="input-text">
                  确认密码:
              </span>
              <input type="password" placeholder="确认密码" name="upwd2" required="" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" style="">
          </li>
          <li class="newinput">
              <span class="input-text">
                  推荐码:
              </span>
              <input class="sign_code ng-pristine ng-untouched ng-valid ng-empty" {if $oid} value="{$oid}" readonly="readonly" {/if} placeholder="推荐码" name="oid" style="">
          </li>
                      <!--<div>
            <input type="checkbox" name="agreement" checked="checked" id="agreement">
            <a>点击注册即同意<a href="javascript:;" id="about">《用户协议》</a></a></input>
          </div>-->
      </ul>

      <button class="newbutton sign_up_btn" onclick="return checkform(this.form);" >
          注册登陆
      </button>

  </div>

调用短信API ，应该交给后端来完成，前端提交即可。

就是想简单的在按钮上限制

如果你服务器端不判断，仅仅前端判断，那么后果很悲惨。小学文化程度的都可以突破你的限制。

用户点击后，按钮上会出现60秒倒数计时，用户再次点击倒计时如果大于0就不处理，提示用户多少秒后才可以重发就可以了。倒计时为0的时候就可以重新发送验证码。那么为了防止用户刷短信，都会设置同一个手机号码验证码一天可以发多少次。如果超出范围就等明天吧！

              <span class="code_btn ng-binding"  onclick="return getCode();">
                  获取验证码
              </span>
<script type="text/javascript">
function getCode() {
    var time = localStorage.retime;
    var t = new Date().getTime()/1000;
    if (time===undefined || t-time>=60) {
        localStorage.retime = t;
        return get_svg();
    } else {
        alert("短信验证码60秒只能点击一次。\n在"+Math.ceil(60-(t-time))+"秒之后可以再次点击。");
    }
}
</script>

function time(){
    var phone_no = $("#phone").val();
    var unique = $('.unique').attr('ind');
    $.ajax({
        url:"{:U('Member/getVerifyCode')}",
        dataType:"json",
        type:"post",
        data:{'phone_no':phone_no,'unique':unique},
        success:function(data){
            if(data.errorcode == 0){
                // alert(data.message);
                times =60;
                var timer = setInterval(CountDown,500);
                function CountDown() { //开启计时器
                    $('.input-box #getPhoneCode').html(times + "s后重试").attr('disabled', 'disabled').css({
                            "color" : "#8590a6",
                            "background": "#ccc",
                            "opacity" : 0.5
                         });
                     times--; 
                    if (times <= 0) {
                        $('.input-box #getPhoneCode').html("重新获取").css("opacity",1);
                        $('.input-box #getPhoneCode').removeAttr('disabled');
                        clearInterval(timer);
                        times = 60;     
                    }
                }
            }else{
                alert(data.message);
                window.location.reload();
            }
        }
    })
}

点击后进行事件的解绑操作，等到时间一过就重新进行事件的绑定就行了

var num = 0;
var t1 = setInterval(function(){
num++;
if(num==60){
这里写上disabled为false就好了
clearInterval(t1);
}
},1000)

    function get_svg($this){
        var url = '<?php echo $this->genurl('your url'); ?>';
        var phone = $('.phone_num').val();
        $.ajax({
            url:url,
            type:'POST',
            data:{phone:phone},
            success:function(res_data){
              startCountDown(61);
            }
        });
    }
    var time = ~~window.name;
    if(time >= 1){
        startCountDown(time);
    }
    function startCountDown(time){
        var $attachBlock = $(".weui-vcode-btn");
        $attachBlock.addClass('disabled');
        window.name = time;
        window.itv = setInterval(function(){
            if(window.name >= 1){
                $attachBlock.text(window.name + '秒后重新发送');
                window.name--;
            }else{
                $attachBlock.html('获取验证码');
                $attachBlock.removeClass('disabled');
                //清除定时器
                window.clearInterval(itv);
            }
        },1000);
    }