秒表不递增JavaScript

Question

我做了一个简单的钟，用一个按钮切换到秒表。由于找不到更好的解决方案，我复制了容器，并签署了一个函数，在容器上切换显示/关闭，以便在时钟和秒表之间切换，使其保持不变。我不明白为什么我的秒表不增加，我应该做些什么来解决这个问题。任何帮助都将不胜感激。这是我的密码：

<div id="container">
    <div id="clock">
        <span id="back">88:88:88</span>
        <span id="front">00:00:00</span>

    <div class="buttons">
        <button id="button-left" onclick="myFunction()"><i class="fas fa-stopwatch"></i></button>
        <button id="button-stop"><i class="fa-solid fa-stop"></i></button>
        <button id="button-play" ><i class="fa-solid fa-play"></i></button>
        <button id="button-right"><i class="fa-solid fa-delete-left"></i></button>
    </div>
</div>
</div>

<div id="container-2">
    <div id="clock-2">
        <span id="back-2">88:88:88</span>
        <span id="front-2">00:00:00</span>

    <div class="buttons-2">
        <button id="button-left-2" onclick="myFunction()"><i class="fas fa-stopwatch"></i></button>
        <button id="button-stop-2" onclick="stopSW()"><i class="fa-solid fa-stop"></i></button>
        <button id="button-play-2" onclick="startSW()"><i class="fa-solid fa-play"></i></button>
        <button id="button-right-2" onclick="reset()"><i class="fa-solid fa-delete-left"></i></button>
    </div>
</div>
</div>
    function myFunction() {
    var x = document.getElementById("container-2");
    let y = document.getElementById("container");
    if (x.style.display === "none") {
        x.style.display = "block";
        y.style.display = "none";
    } else {
        x.style.display = "none";
        y.style.display = "block";
    }
}

function startSW() {
    clearInterval(stopwatch);
    start = setInterval(stopwatch, 1000);
}

function stopSW() {
    clearInterval(start);
}

function reset(){
    clearInterval(stopwatch);
    document.getElementById("front-2").innerHTML = "00:00:00";
}


    function stopwatch() {
    let hours = 0;
    let minutes = 0;
    let seconds = 0;
    let displayHours = 0;
    let displayMinutes = 0;
    let displaySeconds = 0;

    seconds++;

    if(seconds == 60){
        seconds = 0;
        minutes++;

        if(minutes == 60) {
            minutes = 0;
            hours++;
        }
    }

    if (seconds < 10){
        displaySeconds = "0" + seconds;
    } else {
        displaySeconds = seconds;
    }

    if (minutes < 10){
        displayMinutes = "0" + minutes;
    } else {
        displayMinutes = minutes;
    }

    if (hours < 10){
        displayHours = "0" + hours;
    } else {
        displayHours = hours;
    }

    let stopwatchNow = displayHours + ":" + displayMinutes + ":" + displaySeconds;
    document.getElementById("front-2").innerHTML = stopwatchNow;
}

Answer 1

你好，在您设置的秒表功能开始时

    let hours = 0;
    let minutes = 0;
    let seconds = 0;
    let displayHours = 0;
    let displayMinutes = 0;
    let displaySeconds = 0;

这就是您稍后在代码中显示的内容，您需要在此函数之外定义这个变量

Answer 2

这是因为在函数stopwatch中，每次运行该函数时，都会设置

let hours = 0;
let minutes = 0;
let seconds = 0;
let displayHours = 0;
let displayMinutes = 0;
let displaySeconds = 0;

这些变量将始终是0，因为您在函数运行时设置了它们。为了解决这个问题，您需要将它们移出函数之外：

let hours = 0;
let minutes = 0;
let seconds = 0;
let displayHours = 0;
let displayMinutes = 0;
let displaySeconds = 0;

function stopwatch(){
    // removed
    
    seconds++; // this stays here
    // the rest of your code goes in here
}

这样，当函数开始运行时，变量就不会重置为0。

Answer 3

​

<div id="container-2">
    <div id="clock-2">
        <span id="front-2">00:00:00</span>
        --- >>
        <span id="back-2">88:88:88</span>
    </div>
</div>

    <div class="buttons-2">
        <button id="button-left-2" onclick="myFunction()"><i class="fas fa-stopwatch"></i>fun</button>
        <button id="button-stop-2" onclick="stopSW()"><i class="fa-solid fa-stop"></i>stop</button>
        <button id="button-play-2" onclick="startSW()"><i class="fa-solid fa-play"></i>start</button>
        <button id="button-right-2" onclick="reset()"><i class="fa-solid fa-delete-left"></i>reset</button>
    </div>

<script>
  
  
function myFunction() {
    var node = document.getElementById("back-2");
    display(node);
}
  
var start;
function startSW() {
    clearInterval(start);
    start = setInterval(stopwatch, 1000);
}

function stopSW() {
    clearInterval(start);
}

function reset(){
    clearInterval(start);
    document.getElementById("front-2").innerHTML = "00:00:00";
    document.getElementById("back-2").innerHTML = "00:00:00";
    hours = 0;
    minutes = 0;
    seconds = 0;
}

    var hours = 0;
    var minutes = 0;
    var seconds = 0;

function stopwatch() {console.log('stopwatch')

    seconds++;

    if(seconds == 60){
        seconds = 0;
        minutes++;

        if(minutes == 60) {
            minutes = 0;
            hours++;
        }
    }
                      
    display();
                      
}

function display(node){
  

    let displayHours = 0;
    let displayMinutes = 0;
    let displaySeconds = 0;
                          
    if (seconds < 10){
        displaySeconds = "0" + seconds;
    } else {
        displaySeconds = seconds;
    }

    if (minutes < 10){
        displayMinutes = "0" + minutes;
    } else {
        displayMinutes = minutes;
    }

    if (hours < 10){
        displayHours = "0" + hours;
    } else {
        displayHours = hours;
    }

    let stopwatchNow = displayHours + ":" + displayMinutes + ":" + displaySeconds;
  
    if(!node)node=document.getElementById("front-2");
    node.innerHTML = stopwatchNow;
}
</script>

​

有很多错误，

clearInterval没有得到正确的值

需要在全局范围内声明时间变量。

我只能猜到我的函数应该做什么

等等。

玩得开心