Question

我知道之前已经问过这个问题而且我确实检查了以前的相关帖子，但到目前为止我的代码并不高兴。我可以让我的计时器暂停，但是，当我恢复时，它似乎忽略了暂停功能，并且时间显示为好像计时器没有暂停。

<!DOCTYPE html>
<html>
    <head>
        <script>
            var dt = null;
            var val;

            function startTimer(){          
                setTimeout(setTime, 100);   
            }

            function setTime() {                
                if (dt == null)
                    dt = new Date();

                var totalseconds = parseInt(((new Date()) - dt) / 1000, 10);
                var hh = parseInt(totalseconds / (60 * 60), 10);
                var mm = parseInt((totalseconds - (hh * 60 * 60)) / 60, 10);
                var ss = parseInt(totalseconds - (hh * 60 * 60) - (mm * 60), 10);
                document.getElementsByName("txttimer")[0].value = (hh > 9 ? hh : ('0' + hh)) 
                + ":" + (mm > 9 ? mm : ('0' + mm)) + ":" + (ss > 9 ? ss : ('0' + ss));
                val = setTimeout(setTime,1000);
            }

            function pauseTimer() {             
                clearTimeout(val);  
            }

            function resumeTimer() {                
                val = setTimeout(setTime,1000);
            }

        </script> 
    </head>
    <body> 
             <form >  
                    <input onclick="startTimer()" type="button" value="START" style="position: absolute; 
                    margin-left: 20%;  margin-top: 10%; width: 75px;"/>                           
                    <input onclick="pauseTimer()" type="button" value="PAUSE" style="position: absolute; 
                    margin-left: 20%;  margin-top: 15%; width: 75px;"/>  
                    <input onclick="resumeTimer()" type="button" value="RESUME" style="position: absolute; 
                    margin-left: 20%; margin-top: 20%; width: 75px;"/>                   
                    <input type="text" readonly name="txttimer" style="position: absolute; width: 100px; 
                    margin-left: 30%; margin-top: 10%; text-align: center"/>   
            </form> 
    </body>
</html>

如果有人可以帮助我，我将非常感激。

Answer 1

有几种方法可以解决这个问题，但诀窍是跟踪您暂停的秒数，然后从总时间中减去。（或者，你可以跟踪经过的秒数而不是开始时间。）

这是一个解决方案：

        var dt = null;
        var val;
        var pauseStart = null;
        var pauseSeconds = 0;

        function startTimer() {
            setTimeout(setTime, 100);
        }

        function setTime() {
            if (dt == null) dt = new Date();

            var totalseconds = Math.floor((new Date() - dt) / 1000);
            totalseconds -= pauseSeconds;
            var hh = Math.floor(totalseconds / (60 * 60));
            var mm = Math.floor((totalseconds - (hh * 60 * 60)) / 60);
            var ss = Math.floor(totalseconds - (hh * 60 * 60) - (mm * 60));
            document.getElementsByName("txttimer")[0].value = (hh > 9 ? hh : ('0' + hh)) + ":" + (mm > 9 ? mm : ('0' + mm)) + ":" + (ss > 9 ? ss : ('0' + ss));
            val = setTimeout(setTime, 1000);
        }

        function pauseTimer() {
            clearTimeout(val);
            pauseStart = Date.now();
        }

        function resumeTimer() {
            pauseSeconds = (Date.now() - pauseStart) / 1000;
            val = setTimeout(setTime, 1000);
        }

http://jsfiddle.net/mww9D/

请注意，我没有在这里烦恼（但你绝对应该），如果有人在点击恢复之前多次点击暂停，会发生什么。或者，如果他们在计时器没有暂停时点击恢复怎么办？您应该有逻辑来在暂停之前检查计时器是否实际正在运行，并且在恢复时它没有运行。在这些情况下实际禁用按钮也可能是有意义的。

JavaScript：暂停计时器

1 个答案: