目标功能
点击发送后,需要等待5秒,才能再次点击
代码实现
<!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>
</style>
</head>
<body>
<input type="text" name="" id="">
<button>发送验证码</button>
<script>
var myIpt = document.querySelector('input');
var myBtn = document.querySelector('button');
myBtn.addEventListener('click', function () {
var limitTime = 5;
this.disabled = true;
changeText(); //同倒计时案例,先手动调用一次,避免等待
var timer01 = setInterval(changeText, 1000);
function changeText() {
if (limitTime <= 0) {
myBtn.disabled = false;
myBtn.innerHTML = '发送验证码';
clearInterval(timer01); //定时器完成任务后,需要清除
} else {
myBtn.innerHTML = '请等待' + limitTime + '秒';
limitTime--;
}
}
});
</script>
</body>
</html>