When getting the verification code, it is often necessary to send a short message, and it is usually required to send the next one after an interval of 60s. How to achieve this effect? In fact, a timer can achieve
JS area code:
<script>
var btn=document.querySelector('button');
var time=10;
btn.addEventListener('click',function(){
btn.disabled=true;
var timer=window.setInterval(function(){
if(time==0){
window.clearInterval(timer)
btn.disabled=false;
btn.innerHTML='发 送';
time=10;
}else{
btn.innerHTML='请'+ time +'秒后再发送';
time--;
}
},1000)
})
</script>Full code:
<!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>
<style>
input{
outline: none;
height: 24px;
}
button{
width: 120px;
height: 29px;
display: inline-block;
}
::placeholder{
color: rgb(136, 136, 136)36, 136, 136);
}
</style>
</head>
<body>
请输入手机号码发送短信：
<input type="text" placeholder="请输入手机号码">
<button>发送</button>
<script>
var btn=document.querySelector('button');
var time=10;
btn.addEventListener('click',function(){
btn.disabled=true;
var timer=window.setInterval(function(){
if(time==0){
window.clearInterval(timer)
btn.disabled=false;
btn.innerHTML='发 送';
time=10;
}else{
btn.innerHTML='请'+ time +'秒后再发送';
time--;
}
},1000)
})
</script>
</body>
</html>