引入的文件,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>