在jQuery中，我们可以使用clearInterval()函数来停止倒计时，以下是一个简单的示例，展示了如何使用jQuery实现倒计时功能，并在需要时停止倒计时。
（图片来源网络，侵删）
我们需要创建一个HTML文件，包含一个显示倒计时的元素和一个开始/停止倒计时的按钮：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>jQuery倒计时示例</title>
<script src="https://code.jquery.com/jquery3.6.0.min.js"></script>
</head>
<body>
<h1 id="countdown">10</h1>
<button id="startStop">开始/停止</button>
<script src="main.js"></script>
</body>
</html>
接下来，我们需要创建一个JavaScript文件（main.js），用于处理倒计时逻辑：
$(document).ready(function () {
let countdownInterval;
let countdown = 10;
let isCountingDown = false;
// 更新倒计时显示
function updateCountdownDisplay() {
$('#countdown').text(countdown);
}
// 开始倒计时
function startCountdown() {
if (!isCountingDown) {
countdownInterval = setInterval(function () {
countdown;
updateCountdownDisplay();
}, 1000);
isCountingDown = true;
}
}
// 停止倒计时
function stopCountdown() {
clearInterval(countdownInterval);
countdownInterval = null;
isCountingDown = false;
}
// 绑定事件处理程序
$('#startStop').click(function () {
if (isCountingDown) {
stopCountdown();
} else {
startCountdown();
}
});
});
在这个示例中，我们首先定义了一个名为countdownInterval的变量，用于存储倒计时的计时器，我们还定义了两个布尔变量isCountingDown和countdown，分别表示是否正在倒计时以及当前的倒计时值。
updateCountdownDisplay()函数用于更新倒计时显示。startCountdown()函数用于开始倒计时，它使用setInterval()函数设置一个每秒执行一次的定时器，每次执行时将倒计时值减1，并更新显示。stopCountdown()函数用于停止倒计时，它使用clearInterval()函数清除定时器。
我们为开始/停止按钮绑定了点击事件处理程序，当用户点击按钮时，如果当前正在进行倒计时，则停止倒计时；否则，开始倒计时。
现在，当我们在浏览器中打开HTML文件并点击“开始/停止”按钮时，倒计时将开始或停止，请注意，这个示例仅用于演示目的，实际应用中可能需要根据具体需求进行修改。
原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/360467.html
微信扫一扫