个人中心
gpt4 book ai didi

JavaScript:暂停计时器

转载 作者：行者123 更新时间：2023-11-30 17:30:35 53 4
gpt4 key购买 nike

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

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

如果有人能帮助我，我将不胜感激。

最佳答案

有多种方法可以解决这个问题，但诀窍是记录您暂停的秒数，然后从总时间中减去该秒数。 (或者，您可以只跟踪经过的秒数而不是开始时间)。

这是一种解决方案:

        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:暂停计时器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23158168/

53 4 0
文章推荐： javascript - jQuery 没有创建表格行元素
文章推荐： javascript - jQuery - 将 onHover 处理程序添加到区域元素
文章推荐： c# - JSON JObject.Parse 修改json字符串
文章推荐： javascript - Angular Bootstrap 应用程序中的进度条错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com