Question

我尝试在Javascript中制作一个普通的Timer，并在一些教程的帮助下开始编写代码。

我的方式与教程相同，但我的计时器实际上并没有开始运行，我不知道为什么。

这是我的代码：

var time = 0;
        var running = 0;

        function startPause() {
            if(running == 0){
                running = 1;
                increment();
            }
            else{
                running = 0;
            }
        }

        function reset(){
            running = 0;
            time = 0;
            document.getElementById("startPause").innerHTML = "Start";

        }
        function increment() {
                if(running == 1){
                setTimeout(function(){
                    time++;
                    var mins = Math.floor(time / 10 / 60);
                    var secs = Math.floor(time / 10);
                    var tenths = time % 10;
                    document.getElementById("output").innerHTML = mins + ":" + secs + ":" + tenths;

                           }, 100);
                }
        }
</script>

我也做了一个小提琴你可以在这里查看：https://jsfiddle.net/adamswebspace/5p1qgsz9/

我的代码出了什么问题？

Answer 1

你必须像下面那样绑定函数

var vm = this;

vm.startPause = function startPause() {
  if (running == 0) {
    running = 1;
    vm.increment();
  } else {
    running = 0;
  }
}

https://jsfiddle.net/f7hmbox7/

Answer 2

为了让onclick在您的代码中找到该函数。它必须以JSFiddle的<script>标记提供。

您只需添加

即可

<script>

/** JS Here */

</script>

它会起作用。

请记住，来自JS的所有错误都会显示在浏览器检查器的控制台中。

https://jsfiddle.net/dzskncpw/

Answer 3

我清除了一些代码，并使用了setInterval而不是setTimeOut; 请注意，您必须使用clearInterval才能停止计时器

var time = 0;
var running = 0;
var timer = null;
function increment() {
    time++;
    var mins = Math.floor(time / 10 / 60);
    var secs = Math.floor(time / 10);
    var tenths = time % 10;
    document.getElementById("output").innerHTML = mins + ":" + secs + ":" + tenths;
}
function startPause() {
    if (running === 0) {
        running = 1;
        timer = setInterval(increment, 1000);
    } else {
        running = 0;
        clearInterval(timer);
    }
}

function reset() {
    running = 0;
    time = 0;
    document.getElementById("startPause").innerHTML = "Start";

}

计时器无法开始运行

3 个答案: