重置按钮不工作在秒表使用javascript

Reset Button is not working in Stop watch using javascript

本文关键字：javascript 按钮 工作      更新时间：2023-09-26

复位按钮没有复位，但它作为停止按钮工作，谁能帮助我，这段代码有什么问题

<!DOCTYPE html>
<html>
    <head>
        <title>Timer</title>
        <script>            
            var sec = 0;
            var min = 0;
            var hour = 0;
            var theResult = "";
            function WatchOperations(key) {
                sec++;
                if (sec == 60) {
                    sec = 0;
                    min = min + 1; }
                else {
                    min = min; }
                if (min == 60) {
                    min = 0; 
                    hour += 1; 
                }
                if (sec<=9) {
                    sec = "0" + sec;
                }
                document.getElementById("stopwatch").value = ((hour<=9) ? "0"+hour : hour) + " : " + ((min<=9) ? "0" + min : min) + " : " + sec;
                if (key == "Start") {
                    document.getElementById("startButton").value = "Stop ";
                }
                if (key == "Stop ") {
                    document.getElementById("startButton").value = "Start"; 
                    sec = sec-1; sec--; 
                }
                if (document.getElementById("startButton").value == "Start") {
                    return true; 
                }
                SD=window.setTimeout("WatchOperations();", 1000);
                theResult = document.getElementById("stopwatch").value;
            }
            function resetIt() {
                sec = 0;
                min = 0;
                hour = 0;                
                if (document.getElementById("startButton").value == "Stop ") {
                    document.getElementById("startButton").value = "Start";
                    window.clearTimeout(SD);
                }
            }
        </script>
    </head>
    <body>
        <table>
            <tr><td align="right"><input type="text" size="12" id="stopwatch" value="00 : 00 : 00" style="text-align:center" />
                </td>
            </tr>
            <tr><td><input type="button" id="startButton" value="Start" onclick="WatchOperations(this.value);"/></td>
                <td><input type="button" id="resetButton" value="Reset" onclick="resetIt()"></td>
            </tr>
        </table>
    </body>
</html>

添加一行document.getElementById("stopwatch")。Value = "00: 00: 00";在这个方法中，resetIt复位秒表

function resetIt() {
            sec = 0;
            min = 0;
            hour = 0;                
            if (document.getElementById("startButton").value == "Stop ") {
                document.getElementById("startButton").value = "Start";
        document.getElementById("stopwatch").value = "00 : 00 : 00";
                window.clearTimeout(SD);
            }
        }

如果你不想停止手表你需要注释"window.clearTimeout(SD);"这一行在这个方法

首先，您需要声明clearTimeout() ID，这是SD全局。当你在多个函数中使用它时:
第二，你必须设置stopwatch的默认值，即"00 : 00 : 00"当你点击重置。

function resetIt() {
    sec = 0;
    min = 0;
    hour = 0;
    if (document.getElementById("startButton").value == "Stop ") {
        document.getElementById("startButton").value = "Start";
        window.clearTimeout(SD);
        document.getElementById("stopwatch").value = "00 : 00 : 00"; // Changed
    }
}
<<h2> 小提琴演示/strong>

我会说在if条件块的外部重置秒表文本框值，这将确保即使在单击停止按钮时重置按钮也能工作。

function resetIt() {
   sec = 0;
   min = 0;
   hour = 0;                
   if (document.getElementById("startButton").value == "Stop ") {
     document.getElementById("startButton").value = "Start";
     window.clearTimeout(SD);
   }
     document.getElementById("stopwatch").value = "00 : 00 : 00";
}

另外，我看到您使用sec——;当按钮是Stop时。我认为这里不需要。

从你使用的所有代码中删除SD，没有SD，程序也会完美运行。

相关文章：