我创建了一个简单的倒计时器来显示 45 秒的倒计时。我试图使用 JavaScript onclick 函数通过两个按钮来控制这个计时器。一键启动计时器,一键停止计时器。我能够开始计时并将其显示在屏幕上,但无法停止它。我在网上找到了时间脚本并将其修改为仅显示秒。
我尝试创建一个全局 ID(在本例中为“var xx;”)来清除间隔,但没有成功。我不确定缺少什么。以下是我使用 Bootstrap 4 编写的代码的重要部分。
// create a global variable to reset the interval later
var xx;
// Visible Coundown 45s function
function VisibleCountDownTimer45s() {
// reset internval if it is already in defined.
if(xx != undefined) {
clearInterval(xx)
};
// Set the date we're counting down to
var countDownDate = new Date().getTime() + 45000;
// Update the count down every 1 second
var xx = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// console.log (distance);
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(xx);
document.getElementById("demo").innerHTML = "";
}
}, 1000);
}
<!-- timer display box -->
<div class="container">
<div class="row mb-3">
<div class="col-md-4"> </div>
<div class="col-md-4 text-center pb-3" id="demo"><span class="border border-secondary p-2">show timer here</span></div>
<div class="col-md4"> </div>
</div>
</div>
<!-- control buttons -->
<div class="container">
<div class="row">
<div class="col-md-4 text-right"><button class="btn btn-primary" onclick="VisibleCountDownTimer45s()">Start visible Timer</button></div>
<div class="col-md-4 text-center" id="Counter"><p> </p></div>
<div class="col-md4 text-left"><button class="btn btn-primary" onclick="clearInterval(xx)">Stop visible Timer</button></div>
</div>
</div>
最佳答案
您的问题是在您的 VisibleCountDownTimer45s()
函数内部,您正在重新声明一个名为 xx 的本地范围变量。删除其中的 var 关键字,您将把计时器分配给其他函数可以访问的全局 xx 变量。这被称为 scope问题。
更改:var xx = setInterval(function() {
至:xx = setInterval(function() {
看这个:
// create a global variable to reset the interval later
var xx;
// Visible Coundown 45s function
function VisibleCountDownTimer45s() {
// reset internval if it is already in defined.
if (xx != undefined) {
clearInterval(xx)
};
// Set the date we're counting down to
var countDownDate = new Date().getTime() + 45000;
// Update the count down every 1 second
xx = setInterval(function() {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = countDownDate - now;
// console.log (distance);
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("demo").innerHTML = seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(xx);
document.getElementById("demo").innerHTML = "";
}
}, 1000);
}
<div class="container">
<div class="row mb-3">
<div class="col-md-4"> </div>
<div class="col-md-4 text-center pb-3" id="demo"><span class="border border-secondary p-2">show timer here</span></div>
<div class="col-md4"> </div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 text-right"><button class="btn btn-primary" onclick="VisibleCountDownTimer45s()">Start visible Timer</button></div>
<div class="col-md-4 text-center" id="Counter">
<p> </p>
</div>
<div class="col-md4 text-left"><button class="btn btn-primary" onclick="clearInterval(xx)">Stop visible Timer</button></div>
</div>
</div>
还值得注意的是,您可以在不使用 Date 对象并计算相对于它的耗时的情况下获得相同的结果。
let timer;
function startTimer(interval) {
if (timer !== undefined) {
clearInterval(timer);
};
timer = setInterval(function() {
interval -= 1000
if (interval <= 0) {
clearInterval(timer);
document.getElementById("demo").innerHTML = "";
} else {
const seconds = Math.floor(interval / 1000);
document.getElementById("demo").innerHTML = seconds + "s ";
}
}, 1000);
}
<div class="container">
<div class="row mb-3">
<div class="col-md-4"> </div>
<div class="col-md-4 text-center pb-3" id="demo"><span class="border border-secondary p-2">show timer here</span></div>
<div class="col-md4"> </div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-4 text-right"><button class="btn btn-primary" onclick="startTimer(45000)">Start visible Timer</button></div>
<div class="col-md-4 text-center" id="Counter">
<p> </p>
</div>
<div class="col-md4 text-left"><button class="btn btn-primary" onclick="clearInterval(timer)">Stop visible Timer</button></div>
</div>
</div>
关于javascript - 停止倒计时器故障排除,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59602910/