重置按钮在使用JavaScript的秒表中不起作用

Question

重置按钮不会重置，但它可以用作停止按钮，任何人都可以帮助我，此代码有什么问题。

<!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>

Answer 1

添加此行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）;”。 此方法中的这一行

Answer 2

首先，您需要声明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
    }
}

小提琴演示

Answer 3

我想说的是，在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时 。 我认为这不是必需的。

Answer 4

从您曾经使用过的所有代码中删除SD，否则该程序也将正常运行。

重置按钮在使用JavaScript的秒表中不起作用

问题描述

4 个解决方案

解决方案1
1 已采纳 2014-05-22 12:23:57

解决方案2
1 2014-05-22 12:27:31

小提琴演示

解决方案3
1 2014-05-22 12:43:54

解决方案4
0 2014-05-23 10:05:32

重置按钮在使用JavaScript的秒表中不起作用

问题描述

4 个解决方案

解决方案1 1 已采纳 2014-05-22 12:23:57

解决方案2 1 2014-05-22 12:27:31

小提琴演示

解决方案3 1 2014-05-22 12:43:54

解决方案4 0 2014-05-23 10:05:32

解决方案1
1 已采纳 2014-05-22 12:23:57

解决方案2
1 2014-05-22 12:27:31

解决方案3
1 2014-05-22 12:43:54

解决方案4
0 2014-05-23 10:05:32