.verification{
width: 100%;
padding: 0 3%;
height: 50px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.verification .call{
width: 25%;
font-size: 14px;
color: #231815;
line-height: 50px;
letter-spacing: 2px;
}
.verification .obtain{
height: 20px;
margin-top: 15px;
width: 26%;
text-align: center;
font-size: 12px;
/*letter-spacing: 2px;*/
color: #ffffff;
line-height: 20px;
border-radius: 4px;
background:linear-gradient(to right,#f3c71d,#f29617);
}
.verification input{
padding-left: 10px;
width: 49%;
font-size: 12px;
}
.next{
width: 96%;
height: 40px;
margin: 0 2%;
background-color: #d9d8d8;
text-align: center;
line-height: 40px;
border-radius: 6px;
}
.textcode{
height: 20px;
width: 26%;
font-size: 12px;
color: #000000;
margin-top: 15px;
display: none;
}
<div class="verification">
<div class="call">验证号码</div>
<input type="text" id="code" placeholder="请输入验证号码">
<div class="obtain" onclick="getcode(this)">获取验证码</div>
<p class="textcode"></p>
</div>
//获取验证码
function getcode(that){
var phone=$api.byId('phone').value;
var reg=/(^1[3|4|5|6|7|8|9]\d{9}$)|(^09\d{8}$)/;
if(phone==''){
api.toast({
msg: '请输入手机号码',
duration: 1500,
location: 'middle'
});
}else if(!reg.test(phone)){
api.toast({
msg: '手机号输入有误',
duration: 1500,
location: 'middle'
});
}else{
api.ajax({
url: domain_name +'/index/liveroom/note',
dataType: 'json',
method: 'post',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
data: {
body: {
mobile: phone,
}
}
}, function (ret, err) {
var num=60
if(ret.code==1){
$(that).hide()
$(that).next().text('60s后重新获取')
$(that).next().show()
$('#code').focus()
var time=setInterval(function(){
num-=1
$(that).next().text(num+'s后重新获取')
if(!num){
clearInterval(time)
num=60;
$(that).text('重新获取')
$(that).show()
$(that).next().hide()
$(that).next().text(num+'s后重新获取')
}
},1000);
}
})
}
}