83 lines
1.5 KiB
HTML
83 lines
1.5 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
|
|
<title>Document</title>
|
||
|
|
<style>
|
||
|
|
|
||
|
|
#app {
|
||
|
|
border: solid salmon 1px;
|
||
|
|
width: 270px;
|
||
|
|
height: 270px;
|
||
|
|
padding: 50px 15px;
|
||
|
|
}
|
||
|
|
.item {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
|
||
|
|
|
||
|
|
<div id="app">
|
||
|
|
<div class="item">
|
||
|
|
<input type="text" placeholder="请输入验证码">
|
||
|
|
<button id="verificationCode" >获取验证码</button>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
//倒数秒
|
||
|
|
|
||
|
|
let verificationCode =document.querySelector("#verificationCode");
|
||
|
|
let verificationCodeText = "获取验证码";
|
||
|
|
|
||
|
|
//倒计时的总数
|
||
|
|
let s=10;
|
||
|
|
//发送验证码
|
||
|
|
verificationCode.onclick =function(){
|
||
|
|
|
||
|
|
verificationCode.disabled=true;
|
||
|
|
//倒计时总数的 减数
|
||
|
|
let i=0;
|
||
|
|
//验证码 的倒计时
|
||
|
|
let interval = setInterval(()=>{
|
||
|
|
i++;
|
||
|
|
let ns = s-i;
|
||
|
|
//验证码倒计时结束
|
||
|
|
if(ns==0){
|
||
|
|
verificationCodeText="获取验证码"
|
||
|
|
verificationCode.disabled=false;
|
||
|
|
clearInterval(interval);
|
||
|
|
|
||
|
|
}else {
|
||
|
|
//验证码倒计时中
|
||
|
|
verificationCodeText=`请稍等，验证码发送中,${ns}s后再发送`;
|
||
|
|
}
|
||
|
|
//button内容更改
|
||
|
|
verificationCode.innerText =verificationCodeText;
|
||
|
|
},1000);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|