Javascript简易计时器不工作_Javascript_Timer_Setinterval

Javascript简易计时器不工作

javascript timer

Javascript简易计时器不工作,javascript,timer,setinterval,Javascript,Timer,Setinterval,我试图做一个简单的倒计时，但它并没有按照我认为应该的方式工作。这是我第一次在Javascript中使用setInterval，如果有人能发现我的错误，我会非常高兴 <!DOCTYPE html> <html> <head> </head> <body> <script type="text/javascript"> function timer () {

我试图做一个简单的倒计时，但它并没有按照我认为应该的方式工作。这是我第一次在Javascript中使用

setInterval

，如果有人能发现我的错误，我会非常高兴

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <script type="text/javascript">
            function timer () {
                window.clearTimeout(clock)
                var seconds = 10;
                var clock = setInterval(function() {
                    if (seconds == 0) {

                    } else {
                        seconds = seconds-1;
                        document.getElementById('seconds').innerHTML = seconds;
                    };
                },1000);
            }
        </script>
        <button onclick="timer();">timer</button>
        <p id="seconds">10</p>
    </body>
</html>


函数计时器（）{
窗口清除超时（时钟）
var秒=10；
变量时钟=设置间隔（函数（）{
如果（秒==0）{
}否则{
秒=秒-1；
document.getElementById（'seconds'）。innerHTML=seconds；
};
},1000);
}
计时器
10

我希望当您单击按钮时计时器会重新启动，但有两个计时器同时运行。

您的代码有几个问题需要解决：

您需要将

时钟设置为全局变量。在您的示例中，每次调用timer（）
函数时，都会创建一个空的新变量clock


您使用的是函数而不是函数
该功能可能会错过一些滴答声，然后您的秒数
计数器将关闭。如果希望避免这种情况，则应在每次调用interval函数时检查当前时间

无功时钟；
函数计时器（）{
清除间隔（时钟）；
var start=new Date（）.getTime（）；
时钟=设置间隔（函数（）{
var seconds=Math.round（10-（new Date（）.getTime（）-start）/1000）；
如果（秒>0）
document.getElementById（'seconds'）。innerHTML=seconds；
其他的
清除间隔（时钟）；
}, 1000);
}
计时器
10

数学圆（10-（new Date（）.getTime（）-start）/1000）的细分

new Date（）.getTime（）
返回自历元以来的当前时间（以毫秒为单位）
（…-start）/1000
返回计时器启动后的秒数
10-…
返回剩余秒数
Math.round（…）
将结果舍入为整数
只需使用设置超时
即可简化操作（您使用设置间隔
，但清除超时
来清除它），在定时器
函数之外声明必要的变量，并添加一个重置
参数来重置定时器

（函数（）{
var报告=document.querySelector（“#秒”）；
var秒=10；
var=null；
document.querySelector（'按钮'）
.addEventListener（'click'，函数（e）{timer（true）}）；
定时器（真）；
功能定时器（复位）{
秒-=1；
如果（重置）{
clearTimeout（定时）；
秒=10；
}
report.textContent=秒；
如果（秒>0）{
timed=设置超时（计时器，1000）；
}
}
}（））
#秒{
字体：48px/70px粗体verdana，arial；
颜色：白色；
宽度：70px；
高度：70像素；
背景：绿色；
文本对齐：居中；
边界半径：50%；
}
启动/重置计时器
时钟变量是函数的本地变量。每次调用函数时，都会使用一个新的时钟局部变量创建一个新的执行上下文，因此第一个窗口clearTimeout（clock）
什么也不做（我猜在if（seconds==0）之后的空if块中会有另一个执行上下文）。
<!DOCTYPE html>
<html>
    <body>
        <script type="text/javascript">
            var clock;
            function timer () {
                clearInterval(clock);
                var start = new Date().getTime();
                clock = setInterval(function() {
                    var seconds = Math.round(10 - (new Date().getTime() - start) / 1000);
                    if (seconds > 0)
                        document.getElementById('seconds').innerHTML = seconds;
                    else 
                        clearInterval(clock);
                }, 1000);
            }
        </script>
        <button onclick="timer();">timer</button>
        <p id="seconds">10</p>
    </body>
</html>