js倒计时定时器封装
2021-01-12 本文已影响0人
每天进步一点点5454
- 简单版倒计时定时器
- 复制即可查看，根据需求修改
- 效果 点击倒计时
image.png
image.png
<!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>
<body>
<button id="click-code" onclick="btn()">获取动态验证码</button>
<div></div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
var timer;
// 定时器 倒计时 参数1 类名
function xlltime(eamilclss) {
eamilclss.attr('disabled', "true")
var wait = 5;
eamilclss.html(wait + 's');
wait--;
timer = setInterval(function () {
eamilclss.html(wait + 's');
wait--;
if (wait < 0) {
eamilclss.removeAttr('disabled')
window.clearTimeout(timer)
eamilclss.html('获取动态验证码');
}
}, 1000);
}
function btn() {
xlltime($('button'))
}
</script>
</body>
</html>
这是第一版写的不好，参考↑的
<!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>
<body>
<button id="click-code" onclick="btn()">获取动态验证码</button>
<div></div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
// 先在全局定义一个全局变量，来接收定时器的，清除定时器使用的
var timer;
// 定时器 倒计时 参数1button
function xlltime(eamilclss) {
// 按钮禁止点击
eamilclss.attr('disabled', "true")
//从60开始
var wait = 60;
//一点击就给内容赋值(60s)
eamilclss.html(wait + 's');
//直接减减 （为什么在这里写减减？因为如果不写那赋值上60秒会走两次60秒，这个减减只会走一次）
wait--;
timer = setInterval(function () {
//每次走一秒进行赋值
eamilclss.html(wait + 's');
//一秒减一次
wait--;
//小于0不包括0
if (wait < 0) {
//小于0给内容赋值
eamilclss.html('获取动态验证码');
//小于0把按钮的禁止点击给移除
eamilclss.removeAttr('disabled');
//小于0清除定时器，释放内存
window.clearTimeout(timer);
}
}, 1000);
}
function btn() {
xlltime($('button'))
}
</script>
</body>
</html>
