验证码发送60秒倒计时的样式，顺带异步进入后台

引入的文件，jquery是必须的；至于样式文件就各取所需吧。

<link rel="stylesheet" type="text/css" href="css/base.css">

<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>

body里面有

<input class="mobile" type="text" name="mobile" id="phone" placeholder="请输入手机号码">

<input type="button" style="background-color: transparent;border: none"  id="getCode" class="sendma"  onclick="sendCode();" value="发送验证码"/>

 

最后就是js了

<script type="text/javascript">
var localhost="http://192.168.0.141:8001";

 //用户获取验证码
   var countdown=60;
     function sendCode(){
         if(countdown==60){
             var phone=$("#phone").val();
             $.ajax({
                 url : localhost+'/api/member/getVerifyCode?phone=' + phone,
                 type : 'post',
                 async : false,
                 success : function(data) {
                     alert("验证码已发出，请注意查看");
                     console.info(data);
                     $("#timeMill").val(data.result);
                 },
                 error : function() {
                     alert("失败");
                 }
             });
}
         var obj = $("#getCode");
         getCode(obj);

     }

   //发送验证码倒计时
     function getCode(obj) {
         if (countdown == 0) {
             obj.attr("disabled",false);
             obj.val("发送验证码");
             countdown = 60;
             return;
         } else {
             obj.attr("disabled",true);
             obj.val("重新发送(" + countdown + ")");
             countdown--;
         }
         setTimeout(function() {
                 getCode(obj) }
             ,1000)
     }

</script>

 

转载于:https://www.cnblogs.com/luolala/p/9566447.html