Question

我是Javascript的初学者。我正在尝试制作一个计时器。它运作良好，但是当进入Pause和Stop按钮时，它们根本无法正常运行......

对于Pause按钮..假设按下0:58按钮时计时器在Pause上，它会在0:58处停止，但当我再次按下它时恢复倒计时..它只是成为0:57 ..然后停止，它不会一直持续到0点！
对于Stop按钮..当我按下它时，它会出现此错误：

未捕获的ReferenceError：未定义checkstate

以下是整个代码组合在一起，所以你们可以测试一下，让我知道是否还有别的东西：

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body, p, input, button {
                margin:0;
                padding:0;
            }

            html , body {
                height : 100%;
            }

            #mainContent {
                width : 300px;  
                height : 200px;
                margin: 50px auto;
            }

            #seconds {
                padding : 10px;
                font-size : 15px;
                font-weight:bold;
            }

            button {
                padding : 10px;
            }

            #interfereButton {
                margin : 0 40px;
            }


            #timer {        
                width :  200px;
                height: 100px;
                margin-top: 20px;
                font-weight:bold;
                font-size : 60px;
                text-align : center;
            }           
        </style>
        <title>Timer</title>        
    </head>

    <body>
            <div id="mainContent">
                <div id="userControl">
                    <input type="text" name="seconds" id="seconds"/>
                    <button id="start">Start</button>
                </div>
                <p id="timer">0:00</p>
                <div id="interfereButton">
                    <button id="pause">Pause</button>
                    <button id="stop">Stop</button>
                </div>
                <script>
                    var timer = document.getElementById("timer");
                    var start = document.getElementById("start");
                    var startPoint = document.getElementById("seconds");
                    var userControl = document.getElementById("userControl");
                    var userInterfere = document.getElementById("interfereButton");
                    var pause = document.getElementById("pause");
                    var stop = document.getElementById("stop");

                    var timerHandle;
                    var tempValue;

                    function checkState(){
                        if (timer.innerHTML == "0:00"){
                            userControl.style.display = "block";
                            userInterfere.style.display = "none";
                            timer.style.color = "black";
                        } else {
                            userControl.style.display = "none";
                            userInterfere.style.display = "block";
                        }
                    }

                    function activate(x){
                        var min = x.split(":")[0];
                        var sec = x.split(":")[1];

                        if(min >= 0){
                            sec--;
                            if(sec < 0){
                                sec = 59;
                                min--;
                                if(min < 0) {
                                    sec = "00" ;
                                    min = 0 ;               
                                    clearInterval(timerHandle);
                                }           
                            } else if(sec < 10) {
                                sec = "0" + sec;
                                timer.style.color = "red";          
                            }
                            timer.innerHTML = min + ":" + sec ;
                        } else {
                            clearInterval(timerHandle);
                        }   

                        checkState();
                    }


                    start.onclick = function() {
                        if(!isNaN(startPoint.value)){
                            timer.innerHTML= startPoint.value + ":00" ;
                            userControl.style.display = "none";
                            userInterfere.style.display = "block";
                            timerHandle = setInterval("activate(timer.innerHTML)" , 1000);
                        } else {
                            alert("Sorry, only numerical values are allowed.");
                        }
                    }

                    pause.onclick = function() {
                        if(pause.innerHTML == "Pause"){
                            tempValue = timer.innerHTML;
                            clearInterval(timerHandle);
                            pause.innerHTML = "Resume";
                        } else if(pause.innerHTML == "Resume"){
                            timerHandle = setInterval("activate(tempValue)" , 1000);
                            pause.innerHTML = "Pause";
                        }
                    }

                    stop.onclick = function(){
                        clearInterval(timerHandle);
                        timer.innerHTML = "0:00";
                        checkstate();   
                    }

                    window.onload = function(){
                        userInterfere.style.display = "none";
                    }   
                </script>
            </div>
    </body>

</html>

Answer 1

您的问题是当您尝试恢复时，您正在调用设置间隔通过tempValue。 tempValue然后不会更改。因此，每当你的间隔触发时，它都会传递相同的值。您可以通过仅删除tempValue并使用timer.innerHTML来解决此问题。

http://jsfiddle.net/WkuSG/

至于停止按钮，检查你的方法名称，你已经打字，S应该是国会大厦。

其他一些说明。你真的不应该使用setInterval传递一个字符串。在内部使用eval这是不好的。最好传递一个函数。像这样：

setInterval(function(){
    activate(timer.innerHTML);
}, 1000);

最后，你不能指望setInterval准确无误。如果此计时器需要非常准确，则需要比较时间戳。由于javascript是单线程的，因此其他一些javascript可能会浪费你的时间。

Answer 2

我可以回答你的部分问题：你的stop.onclick你正在调用checkstate（），而这个函数叫做checkState。 JavaScript区分大小写。

Answer 3

首先，

您对checkstate()的来电是错误的。它与定义的函数checkState不同。

B中。我不知道你在Pause / Result中使用tempValue做了什么。此外，您无需将值传递给您的tick函数（您称之为“激活”，但它实际上是一个滴答声）。在tick函数内部，只需获取DIV的内容即可。

工作示例： http://jsbin.com/ohoqot

另外，将函数包装在范围内是个好主意：

(function(globalScope) {
    'use strict';

    var timer, start, startPoint, userControl, userInterfere, pause,
        stop, timerHandle, tempValue;

    function tick() { .... }

    ... other functions here ...

    window.onload = function(){
      setGlobals();
      setupBindings();
      userInterfere.style.display = "none";
    };

}(this));

使用javascript制作简单的计时器，但得到奇怪的行为

3 个答案: