当需要在网页中添加短信验证码的时候，我们通常需要一个倒计时的功能，限制60秒内只允许重新获取一次验证码。下面是JavaScript实现短信倒计时60s的攻略。
1. 倒计时基础框架
我们先来搭建倒计时的基本框架，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);
}
2. 添加点击事件
在点击按钮的时候，我们需要触发倒计时函数。因此，我们需要在JavaScript中添加一个点击事件：
btn.addEventListener("click", function () {
settime(this);
});
示例1：完整代码
接下来是完整代码示例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>
示例2：jQuery实现
除了原生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”函数用于设置对应的文本内容。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript实现短信倒计时60s - Python技术站
微信扫一扫 
支付宝扫一扫 