个人中心
gpt4 book ai didi

javascript - 暂停秒表并不会停止时间

转载 作者：行者123 更新时间：2023-11-28 01:54:13 25 4
gpt4 key购买 nike

希望我能在这里说清楚。

我使用以下代码来运行我的秒表:

function timecounter(starttime)
    {
    currentdate = new Date();
    details = document.getElementById('details');
    stopwatch = document.getElementById('stopwatch');

    var timediff = currentdate.getTime() - starttime;
    if(runningstate == 0)
        {
        timediff = timediff + stoptime
        }
    if(runningstate == 1)
        {
        stopwatch.value = formattedtime(timediff);
        refresh = setTimeout('timecounter(' + starttime + ');',10);
        }
    else
        {
        window.clearTimeout(refresh);
        stoptime = timediff;
        }
    }

function startandstop()
  {
  var startandstop = document.getElementById('startandstopbutton');
  if(runningstate==0)
{
 startandstop.value = 'Pause';
 runningstate = 1;
 timecounter(starttime);
 }
else
  {
  startandstop.value = 'Start';
  runningstate = 0;
  lapdate = '';
  }
 }

但是当我选择暂停时间按钮时，时间停止，但是当我再次按下开始时，它会跳到当前时间，就好像我没有暂停时间一样。

我一直试图弄清楚这是怎么回事，但没有成功。

我相信这可能与 timecounter() 函数有关，但从那里我不确定。

任何帮助将不胜感激!

谢谢，布兰登

最佳答案

如果您想要以毫秒为单位接近准确的结果，我认为您应该使用 .performance.now()。

我认为您遇到了一个有趣的问题，因此我出于兴趣想出了自己的解决方案。希望能帮助到你。 :)(代码下方更新)

http://jsfiddle.net/colbycallahan/CjDz7/1/ (为了显示和四舍五入而对其进行了一些清理)

工作并需要 jQuery:

HTML:

<div id="console"></div>
<input type="button" id="btn" value="start time">
<input type="button" id="btn2" value="stop time">

js:

var timerRunning = false;
var startTime;
var totalTime;
$('#console').data('totalTime', 0);

function startTimer(){
    totalTime = $('#console').data('totalTime');
    startTime = window.performance.now();
    timerRunning = true;

    function timerLoop(){
        window.setTimeout(function(){
            if(timerRunning){
                $('#console').text(window.performance.now() - startTime + totalTime);
                timerLoop();
            }
        }, 50);
    }

    timerLoop();    
}

$('#btn').on('click', function(){
    startTimer();
});

$('#btn2').on('click', function(){
    totalTime = window.performance.now() - startTime + totalTime;
    $('#console').data('totalTime', totalTime);
    timerRunning = false;
});

我拿了你的代码，我做的第一件事是修复可能导致语法错误的问题，即与 if 语句分开的行上的大括号，运行状态为 0 时 if 语句中缺少分号，一个分号不正确放置在 timecounter() 调用中。您尝试通过将函数设为字符串来调用函数，但字符串永远不会调用函数。在将 starttime 作为参数传递给 timecounter() 之前，未定义 starttime。您的 settimeout() 行应该在条件语句之外设置以调用它。如果运行状态不是 1，则不必调用 else。除了将其设置为空字符串之外，未定义 lapdate。此外，除非运行状态为 1，否则不会定义刷新，但仅当刷新不等于 1 时才调用刷新。最后，您没有包含了解是否犯了其他错误所需的所有代码，也没有足够的代码来了解我是否重写了内容将解决您的问题，这就是我编写新代码的原因(它需要将 jquery 库包含在您的页面上)。我不太明白你的代码逻辑。另一件事:在用户启动计时器、单击暂停然后恢复计时器后，您将需要检索所存储的已用时间值。作为感谢，您应该访问 JSLint.com 或类似网站，并且在通过 lint 测试之前切勿在浏览器中运行代码。我只是在底部重新发布您的代码，并不指望它能够工作。我用普通的 javascript 重新设计了计时器，不需要 jquery。它在这里:

无需 jQuery 即可工作:

<!DOCTYPE html>
<html>
<head> 
</head>
<body>

    <div id="console"></div>
    <input type="button" id="btn" value="start time" onclick="startTimer();">
    <input type="button" id="btn2" value="stop time" onclick="stopTimer();">
    <input type="hidden" id="storedTime" value="0">

<script>
    var timerRunning = false;
    var startTime;
    var totalTime;
    var storedTimeInp = document.getElementById('storedTime');
    var console = document.getElementById('console');

    function startTimer(){
        totalTime = Number(storedTimeInp.value, 10);
        startTime = window.performance.now();
        timerRunning = true;

        function timerLoop(){
            window.setTimeout(function(){
                if(timerRunning){
                    console.innerHTML = (window.performance.now() - startTime + totalTime);
                    timerLoop();
                }
            }, 50);
        }

        timerLoop();    
    }    

    function stopTimer(){
        totalTime = window.performance.now() - startTime + totalTime;
        storedTimeInp.value = totalTime;
        timerRunning = false;
    }   


</script>
</body>
</html>

您的代码重写有点(损坏):

var runningstate = 0;

function timecounter(starttime){
  currentdate = new Date();
  details = document.getElementById('details');
  stopwatch = document.getElementById('stopwatch');

  var timediff = currentdate.getTime() - starttime;

  setTimeout(
    if(runningstate == 0){
      timediff = timediff + stoptime;
    }else{
      stopwatch.value = formattedtime(timediff);
      timecounter(starttime);
      stoptime = timediff;
    }  
  ,10);
}

function startandstop(){
  var startandstop = document.getElementById('startandstopbutton');
  if(runningstate==0){
    startandstop.value = 'Pause';
    runningstate = 1;
    starttime = new Date();
    starttime = starttime.getTime();
    timecounter(starttime);
  }else{
    startandstop.value = 'Start';
    runningstate = 0;
    lapdate = '';
  }
}

关于javascript - 暂停秒表并不会停止时间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19361852/

25 4 0
文章推荐： javascript - Socket.io如何获取房间ID
文章推荐： html - CSS 网格和悬停文本
文章推荐： html - 请帮我解决这个导航栏
文章推荐： html - 两侧背景淡出(纯html)
行者123
个人简介

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

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