使用 javascript 制作简单的计时器但出现奇怪的行为

发布于 2024-12-08 11:17:39 字数 5736 浏览 0 评论 0原文

我是 Javascript 的初学者。我正在尝试制作一个计时器。它工作得很好，但是当涉及到 Pause 和 Stop 按钮时，它们根本无法正常工作......

对于 Pause > 按钮..假设计时器处于 0:58 状态，当按下 Pause 按钮时，它会在 0:58 处停止，但是当我按下它时再次恢复倒计时..它变成了0:57..然后停止了，它直到 0:00 才继续！
对于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>

原文

I'm a beginner at Javascript. I'm trying to make a timer. It works good, but when comes to the Pause and Stop buttons, they don't function well at all...

For Pause button.. let's say timer is on 0:58 when Pause button is pressed, it stops at 0:58 but when i press it again to resume the
countdown .. it just become 0:57 .. And stops afterwards, it
doesn't continue till 0:00 !
And for the Stop button.. When i simply press it, it gives this error
:
Uncaught ReferenceError: checkstate is not defined

Here's the whole code combined so you guys can test it and let me know if there's something else :

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吻安 2024-12-15 11:17:39

您的问题是，当您尝试恢复时，您正在调用设置间隔传递 tempValue。 tempValue 则不会改变。因此，每次您的间隔触发时，它都会向其传递相同的值。您可以通过消除 tempValue 并像最初一样使用 timer.innerHTML 来解决此问题。

http://jsfiddle.net/WkuSG/

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

其他一些注释。您确实不应该使用 setInterval 传递字符串。在内部使用 eval ，这是不好的。最好传递一个函数。像这样的事情：

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

最后，你不能真正指望 setInterval 是准确的。如果这个计时器需要非常准确，您将需要比较时间戳。由于 javascript 是单线程的，其他一些 javascript 可能最终会浪费你的时间。

Your problem is when you attempt to resume, you're calling set interval passing tempValue. tempValue is then not changed. So every time your interval fires, it's passing the same value to it. You can fix this by just eliminating tempValue and using timer.innerHTML the same way you do initially.

http://jsfiddle.net/WkuSG/

As for the stop button, check your method name, you've typoed, the S should be capitol.

Some other notes. You really shouldn't use setInterval passing a string. Internally that uses eval which is bad. It is better to pass a function. Something like this:

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

And finally, you can't really count on setInterval being accurate. If this timer needs to be very accurate you will need to compare timestamps. Since javascript is single-threaded, some other javascript could end up throwing off your time.

回复收藏 0 原文

诗化ㄋ丶相逢 2024-12-15 11:17:39

我可以回答您的部分问题：在您的 stop.onclick 中，您正在调用 checkstate() 而该函数称为 checkState。 JavaScript 区分大小写。

回复收藏 0 原文

过潦 2024-12-15 11:17:39

首先，

您对 checkstate() 的调用是错误的。它与定义的函数 checkState 的大小写不同。

B. 我不知道你在暂停/结果中对 tempValue 做什么。此外，无需将值传递给您的刻度函数（您将其称为“激活”，但它实际上是一个刻度）。在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));

First,

your call to checkstate() is wrong. It differs in case from the defined function, checkState.

B. I don't know what you're doing with the tempValue in the Pause/Result. Also there's no need to pass a value to your tick function (which you called "activate", but it's really a tick). Inside the tick function, just get the content of the DIV.

working example:
http://jsbin.com/ohoqot

also, it's a good idea to wrap your functions in a scope:

(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));

回复收藏 0 原文

~没有更多了~