1

希望我能在这里说清楚。

我正在使用以下代码来运行我的秒表：

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() 函数有关，但从那里我不确定。

任何帮助将不胜感激！

谢谢，布兰登

4

1 回答 1

1

我认为如果你想要在毫秒方面接近准确的东西，你应该使用 .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。您的 settimeout() 行应设置在条件语句之外以调用它。如果运行状态不是 1，则不必要地调用 else。除了将其设为空字符串外，未定义 lapdate。除非运行状态为 1，否则不定义刷新，但仅在刷新不等于 1 时调用。最后，您没有包含所有必要的代码来了解是否犯了其他错误，也没有足够的代码来知道我重写的内容是否可以解决您的问题，这就是我编写新代码的原因（它需要将 jquery 库包含在您的页）。我真的不明白你的代码的逻辑。还有一件事：您需要在用户启动计时器、单击暂停然后恢复计时器后检索经过时间的存储值。作为感谢，您应该访问 JSLint.com 或类似网站，并且在通过 lint 测试之前不要在浏览器中运行您的代码。我只是在底部重新发布您的代码，并且不希望它起作用。我在 vanilla javascript 中重做了我的计时器，不需要 jquery。是这里：这就是我编写新代码的原因（它需要在您的页面中包含 jquery 库）。我真的不明白你的代码的逻辑。还有一件事：您需要在用户启动计时器、单击暂停然后恢复计时器后检索经过时间的存储值。作为感谢，您应该访问 JSLint.com 或类似网站，并且在通过 lint 测试之前不要在浏览器中运行您的代码。我只是在底部重新发布您的代码，并且不希望它起作用。我在 vanilla javascript 中重做了我的计时器，不需要 jquery。是这里：这就是我编写新代码的原因（它需要在您的页面中包含 jquery 库）。我真的不明白你的代码的逻辑。还有一件事：您需要在用户启动计时器、单击暂停然后恢复计时器后检索经过时间的存储值。作为感谢，您应该访问 JSLint.com 或类似网站，并且在通过 lint 测试之前不要在浏览器中运行您的代码。我只是在底部重新发布您的代码，并且不希望它起作用。我在 vanilla javascript 中重做了我的计时器，不需要 jquery。是这里：com 或类似的，并且永远不要在浏览器中运行您的代码，直到它通过 lint 测试。我只是在底部重新发布您的代码，并且不希望它起作用。我在 vanilla javascript 中重做了我的计时器，不需要 jquery。是这里：com 或类似的，并且永远不要在浏览器中运行您的代码，直到它通过 lint 测试。我只是在底部重新发布您的代码，并且不希望它起作用。我在 vanilla 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 = '';
  }
}
于 2013-10-14T15:02:47.133 回答