定时器实现60秒后重新发送验证码。
也可用作几秒后自动跳转页面。
实现思路如下:
创建两个 button,默认第一个 button 显示,第二个隐藏,当点击第一个时隐藏第一个显示第二个。这样可以解决第一个按钮连续点击后的 bug。
声明变量并赋值,点击事件中对声明的变量做自减,做判断,如果变量大于 1 则执行定时器,否则所有属性回复默认值,并关闭定时器。
示例代码:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn1" type="button" onclick="clk()">发送验证码</button>
<button id="btn2" type="button" style="display: none;"></button>
<script>
// 定义重新发送间隔时间
var num = 60;
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
function clk() {
btn1.style.display = 'none';
btn2.style.display = 'block';
btn2.innerHTML = '重新发送' + num + 's';
// 定时器
btn_time = setInterval(function() {
num--;
if(num > 0) {
btn2.innerHTML = '重新发送' + num + 's';
}else{
// 回到初始状态
btn2.style.display = 'none';
btn1.style.display = 'block';
num = 60;
// 关闭定时器
clearInterval(btn_time);
}
},1000)
}
</script>
</body>
</html>
扫码关注微信公众号,持续更新干货