<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
border: 0;
padding: 0;
margin: 0;
}
.big {
margin: auto;
height: 400px;
width: 450px;
background-color: antiquewhite;
}
.small1 {
margin-top: 40px;
width: 80%;
height: 40px;
margin-left: 45px;
}
.small1 a {
float: right;
line-height: 40px;
}
.small2 {
width: 80%;
height: 40px;
margin-left: 45px;
}
#haoma {
border-radius: 15px;
height: 40px;
width: 80%;
margin-left: 45px;
margin-top: 40px;
}
#yanzheng {
border-radius: 15px;
height: 40px;
width: 60%;
float: left;
}
button {
border-radius: 15px;
margin-left: 45px;
margin-top: 40px;
height: 40px;
width: 80%;
background-color: gold;
}
.span1 {
float: left;
}
.span1 .span2 {
margin-top: 20px;
}
.span2 {
float: right;
}
p {
margin-top: 30px;
text-align: center;
}
a {
text-decoration: none;
}
</style>
<body>
<div class="big">
<h1>验证码登录</h1>
<input id="haoma" type="text" placeholder="请输入电话号码">
<div class="small1">
<input id="yanzheng" type="text" placeholder="请输入验证码">
<a id="test" href="#">获取验证码</a>
</div>
<button>登录/注册</button>
<div class="small2">
<span class="span1">其他登录方式:</span>
<span class="span2">密码登录</span>
</div>
<p>登录表示你同意 <a href="#">用户条款</a>和 <a href="#">隐私条款</a></p>
</div>
<script>
var a = document.querySelector('#test')
var time = 60;
a.addEventListener('click', function () {
//点击a标签后,会禁用,ariaDisabled的值为true表示禁用
a.ariaDisabled = true;
//time的值每一秒减一次
var timer = setInterval(function () {
if (time == 0) {
//如果时间为0,清除定时器并且复原a标签的内容为原始内容
//ariaDisabled的值设为false表示可以点击
clearInterval(timer);
a.ariaDisabled = false;
a.innerHTML = '获取验证码'
//将time的值重新置为60
time = 60;
} else {
//点击a标签后,a标签的内容会发生变化
a.innerHTML = `${time}s后可再次发送`;
time--;
}
}, 1000)
})
</script>
</body>
</html>
JS——实现短信验证界面(定时器)
最新推荐文章于 2022-09-12 22:07:30 发布