实现发送短信倒计时的效果-CFANZ编程社区

实现发送短信倒计时的效果

Gascognya 2022-04-22 阅读 58

<!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>发送短信</title>
</head>
<body>
<form action="">
手机号码:
<input type="phone">
<button>发送</button>
</form>
<script>
var btn=document.querySelector('button');
// 按钮禁用
var time=10;
btn.addEventListener('click',function(){
btn.disabled=true;
var timer =setInterval(function(){
if (time==0){
//清除闹钟定时器 clearInterval(timerID);
clearInterval(timer);
btn.disabled=false;
btn.innerHTML='发送';
time=10;
}else{
btn.innerHTML='还剩下'+time+'秒';
time--;
}
},1000);
});
</script>
</body>
</html>

0 条评论