一、代码
css代码
//禁止点击
.notclick {
pointer-events: none;
}
html代码
<div>
<input type="text" id="phone" maxlength="11" placeholder="请输入您的手机号码…">
</div>
<div>
<input type="text" id="code" placeholder="验证码">
<div class="wp" >获取验证码</div>
</div>
<div>
<div class="btn">立即注册</div>
</div>
js代码
<script>
$('.wp').click(function () {
var wp = document.getElementsByClassName('wp')[0];
var phone = $('#phone').val();
if (!phone) {
alert('请输入手机号');
return;
}
$.ajax({
url: "/appapi/register/send",
type: "post",
dataType: "json",
data: { mobile: phone, event: "register" },
success: function (data) {
alert(data.msg);
if(data.code == 1){
$('.wp').addClass('notclick');
}
}
});
let time = 10;
const timer = setInterval(() => {
time--;
if (time <= 0) {
wp.innerHTML = "重新获取验证码"
clearInterval(timer);
$('.wp').removeClass('notclick');
} else {
if (time < 10) {
wp.innerHTML = "0" + time + "s后重新获取"
} else {
wp.innerHTML = time + "s后重新获取"
}
}
console.log(time);
}, 1000);
})
$('.btn').click(function () {
var phone = $('#phone').val();
var invite = $('#invite').val();
if (!phone) {
alert('请输入手机号');
return;
}
var code = $('#code').val();
if (!code) {
alert('请输入验证码');
return;
}
$.ajax({
url: "/appapi/register/register_form",
type: "post",
dataType: "json",
data: { mobile: phone, captcha: code, invite: invite },
success: function (data) {
alert(data.msg)
if(data.code==1){
window.location.href = "http://baidu.com"; //下载页面
}
},
fail: function (msg) {
alert(msg);
}
});
})
</script>