当需要在网页中添加短信验证码的时候,我们通常需要一个倒计时的功能,限制60秒内只允许重新获取一次验证码。下面是JavaScript实现短信倒计时60s的攻略。
我们先来搭建倒计时的基本框架,HTML代码如下:
<button id="btn">获取验证码</button>
需要注意的是,这里的按钮id为“btn”,可以根据实际情况修改。
接下来,我们在JavaScript中获取该元素,并倒计时,在倒计时结束后恢复按钮的状态。
var btn = document.getElementById("btn");
var countdown = 60;
function settime(obj) {
if (countdown == 0) {
obj.removeAttribute("disabled");
obj.innerText = "获取验证码";
countdown = 60;
return;
} else {
obj.setAttribute("disabled", true);
obj.innerText = "重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function () {
settime(obj);
}, 1000);
}
在点击按钮的时候,我们需要触发倒计时函数。因此,我们需要在JavaScript中添加一个点击事件:
btn.addEventListener("click", function () {
settime(this);
});
接下来是完整代码示例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>短信验证码倒计时</title>
</head>
<body>
<button id="btn">获取验证码</button>
<script>
var btn = document.getElementById("btn");
var countdown = 60;
function settime(obj) {
if (countdown == 0) {
obj.removeAttribute("disabled");
obj.innerText = "获取验证码";
countdown = 60;
return;
} else {
obj.setAttribute("disabled", true);
obj.innerText = "重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function () {
settime(obj);
}, 1000);
}
btn.addEventListener("click", function () {
settime(this);
});
</script>
</body>
</html>
除了原生JavaScript,我们也可以使用jQuery实现短信验证码倒计时,如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>短信验证码倒计时</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<button id="btn">获取验证码</button>
<script>
var countdown = 60;
function settime(obj) {
if (countdown == 0) {
obj.removeAttr("disabled");
obj.text("获取验证码");
countdown = 60;
return;
} else {
obj.attr("disabled", true);
obj.text("重新发送(" + countdown + ")");
countdown--;
}
setTimeout(function () {
settime(obj);
}, 1000);
}
$('#btn').click(function () {
settime($(this));
});
</script>
</body>
</html>
需要注意的是,在使用jQuery之前,需要先引入jQuery库。通过与之前的原生JavaScript对比,可以发现,在使用jQuery实现倒计时的时候,只需要在选择器中传入字符串形式的id,即可选择按钮元素。另外,jQuery中的获取属性和设置属性分别使用“removeAttr”和“attr”函数,以及“text”函数用于设置对应的文本内容。
本文链接:http://task.lmcjl.com/news/8231.html