Javascript 停止倒计时的故障排除

我创建了一个简单的倒计时计时器来显示45秒的倒计时。我正试图使用JavaScript onclick函数通过两个按钮来控制这个计时器。一个按钮将启动计时器，另一个按钮将停止计时器。我可以开始计时并将其显示在屏幕上，但无法停止计时。我在网上找到了时间脚本，并将其修改为只显示秒数

我试图创建一个全局id（在本例中为“var xx；”）来清除间隔，但没有成功。我不知道少了什么。下面是我使用Bootstrap4编写的代码的重要部分

//创建一个全局变量以稍后重置间隔
变量xx；
//可见光下45s功能
函数VisibleCountDownTimer45s（）{
//如果internval已在定义中，则重置internval。
如果（xx！=未定义）{
清除间隔（xx）
};
//确定我们倒计时的日期
var countDownDate=new Date（）.getTime（）+45000；
//每1秒更新一次倒计时
var xx=setInterval（函数（）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//console.log（距离）；
var秒=数学楼层（（距离%（1000*60））/1000）；
//使用id=“demo”在元素中显示结果
document.getElementById（“demo”）.innerHTML=seconds+s；
//如果倒计时结束，写一些文字
如果（距离<0）{
净距（xx）；
document.getElementById（“demo”）.innerHTML=“”；
}
}, 1000);
}

在这里显示计时器
启动可见计时器

停止可见计时器

您的问题是，在

VisibleCountDownTimer45s（）函数中，您正在重新声明一个名为xx的局部作用域变量。删除那里的
var
关键字，然后将计时器分配给其他函数可以访问的全局
xx
变量。这就是众所周知的问题

更改：
var xx=setInterval（函数（）{

To:
xx=setInterval（函数（）{

见此：


//创建一个全局变量以稍后重置间隔
变量xx；
//可见光下45s功能
函数VisibleCountDownTimer45s（）{
//如果internval已在定义中，则重置internval。
如果（xx！=未定义）{
清除间隔（xx）
};
//确定我们倒计时的日期
var countDownDate=new Date（）.getTime（）+45000；
//每1秒更新一次倒计时
xx=设置间隔（函数（）{
//获取今天的日期和时间
var now=new Date（）.getTime（）；
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在；
//console.log（距离）；
var秒=数学楼层（（距离%（1000*60））/1000）；
//使用id=“demo”在元素中显示结果
document.getElementById（“demo”）.innerHTML=seconds+s；
//如果倒计时结束，写一些文字
如果（距离<0）{
净距（xx）；
document.getElementById（“demo”）.innerHTML=“”；
}
}, 1000);
}

在这里显示计时器
启动可见计时器

停止可见计时器