需求重現
綁定手機號，或者手機號註冊賬戶時，需要驗證碼，驗證碼點擊後60s內禁止操作
解決辦法
html文件
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>綁定手機號</title>
<link rel="stylesheet" href="static/css/base.css">
<link rel="stylesheet" href="static/css/public.css">
<style>
section{
width: 100%;
height: auto;
overflow:hidden;
padding: 0 0.2rem;
margin-top: 0.24rem;
background: #fff;
}
.item{
width: 100%;
height: 0.8rem;
border-bottom: 0.01rem solid #cfcfcf;
display: flex;
display: -webkit-flex;
align-items: center;
-webkit-align-items: center;
position: relative;
}
.item label{
width: 20%;
height: 100%;
line-height: 0.8rem;
}
#phone{
width: 80%;
height: 100%;
line-height: 0.8rem;
}
#code{
width: 55%;
height: 100%;
line-height: 0.8rem;
}
#checkCode{
width: 24%;
height: 80%;
border-left: 0.01rem solid #cfcfcf;
color: #47bfc5;
display: flex;
align-items: center;
justify-content: center;
display: -webkit-flex;
-webkit-align-items: center;
-webkit-justify-content: center;
position: relative;
}
.mask{
width: 24%;
height: 100%;
position: absolute;
top: 0;
right: 0;
z-index: 10;
display: none;
}
#submit{
margin: 0 0.2rem;
height: 0.8rem;
display: flex;
align-items: center;
justify-content: center;
display: -webkit-flex;
-webkit-align-items: center;
-webkit-justify-content: center;
margin-top: 0.5rem;
background: #47bfc5;
color: #fff;
font-size: 0.3rem;
}
</style>
</head>
<body>
<main>
<section>
<div class="item">
<label for="phone">手機號</label>
<input type="number" id="phone" placeholder="請輸入綁定手機號">
</div>
<div class="item" style="border: none;">
<label for="phone">驗證碼</label>
<input type="number" id="code" placeholder="請輸入驗證碼">
<div id="checkCode">
獲取驗證碼
</div>
<div class="mask"></div>
</div>
</section>
<div id="submit">確 認</div>
</main>
</body>
</html>
<script src="static/js/jquery-3.2.1.min.js"></script>
js文件
var countSeconds=60;//驗證碼倒計時
var aa; //延遲變量
$("#checkCode").click(function () {
var phone=$("#phone").val();
if(phone==''){
layMessage("請輸入手機號！");
return false;
}
if(!mobileReg(phone)){
layMessage("手機格式不正確");
return false;
}
clearTimeout(aa);//清除延遲
settime();
$(".mask").show();
var code=$.md5(phone+"APP_20!$_TY_HZ");
console.log(code);
//向手機發送驗證碼
//這裏是我自己封裝的ajax請求，根據自己實際情況自定義
publicAjax(baseAjaxUrl+"/ty_api/user/sendMessage","POST",{"code":code,"mobile":phone},sendInfoCall);
});
//驗證碼倒計時
function settime() {
if(countSeconds==0){
$(".mask").hide();
$("#checkCode").html("獲取驗證碼");
countSeconds=60;
return;
}else{
$("#checkCode").html("剩餘"+countSeconds+"s");
countSeconds--;
}
aa=setTimeout(function () {
settime()
},1000)
}
//發送短信的回調
function sendInfoCall(res) {
if(res.errorCode==200){
layMessage(res.message,1);
}else{
layMessage(res.message,1);
}
}截圖
這樣就可以了！僅供參考！