面试题
登录页面获取验证码的功能，用户点击获取验证码按钮(id=”btn1”)，按文字变为“(N)后获取验证码”，N为倒计对秒数，从 60 开始，每秒减一，减到 0的时候，按钮文字变为“获取验证码”，并需要做防止短时间内重复点击，请写出对应的代码。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<div>
<button id="btn1" onclick="click">获取验证码</button>
</div>
<body>
<script>
// 获取页面的按钮元素
var btn1 = document.getElementById('btn1');
// 按钮点击事件
btn1.addEventListener('click', function(){
// 将按钮设置为不可用状态
btn1.disabled = true;
// 设置倒计时时间
var time = 60;
// 设置定时器，每隔1秒执行一次
var timer = setInterval(function(){
// 判断时间是否到达0
if(time == 0){
// 将按钮恢复为可用状态
btn1.disabled = false;
// 修改按钮文本
btn1.innerHTML = '获取验证码';
// 清除定时器
clearInterval(timer);
}else{
// 修改时间
time--;
// 修改按钮文本
btn1.innerHTML = time + '秒后重新获取';
}
}, 1000);
})
</script>
</body>
</html>
效果图
点击前
点击后
