如何记录多个时间值，一个接一个

Question

我无法依次打印 5 个不同的值。我的代码应该像这样工作：

用户按下开始按钮，计时器开始，然后用户按下停止按钮，计时器停止，经过的时间打印在下方。用户这样做了 5 次，下面的每个条目都应该根据用户的速度有不同的时间值。（例如“1.你用了 2.3 秒。2.你用了 1.7 秒。等等）。

我的代码似乎打印了第一个时间值，但是当我第二次尝试无法让它工作时，我尝试添加 if 语句来检查第一个内部 html 标签是否是已满，但没有用。

这是我的代码：

var status = 0; //0:stop 1:running
var time = 0;
var f = 0;
var s = 0;
var t = 0;
var f = 0;
var f2 = 0;

function start() {
  status = 1;
  document.getElementById("startBtn").disabled = true;
  timer();
  if (f = 0) {
    f + 1;
  } else if (f > 0) {
    s + 1;
  }

}

function stop() {
  if (f = 1) {
    document.getElementById("first").innerHTML = time + 1;
    f++;
  }
  if (s = 1) {
    document.getElementById("second").innerHTML = time + 1;
    s++;
  }
  status = 0;
  document.getElementById("startBtn").disabled = false;
}

function reset() {
  status = 0;
  time = 0;
  document.getElementById('timerLabel').innerHTML = '00:00:00';
  document.getElementById("startBtn").disabled = false;
}

function timer() {

  if (status == 1) {
    setTimeout(function() {
      time++;
      var min = Math.floor(time / 100 / 60);
      var sec = Math.floor(time / 100);
      var mSec = time % 100;
      if (min < 10) {
        min = "0" + min;

      }
      if (sec >= 60) {
        sec = sec % 60;
      }
      if (sec < 10) {
        sec = "0" + sec;
      }
      document.getElementById('timerLabel').innerHTML = min + ":" + sec + ":" + mSec;
      timer();
    }, 10);
  }
}

<div class="container">
  <h1 class="title">Stopwatch</h1>
  <h1 id="timerLabel">00:00:00</h1>
  <input type="button" value="START" class="myButton" onClick="start()" id="startBtn">
  <input type="button" value="STOP" class="myButton" onClick="stop()">
  <input type="button" value="RESET" class="myButton" onClick="reset()">
  <h2 id="first">0</h2>
  <h2 id="second">0</h2>
  <h2 id="third">0</h2>
  <h2 id="forth">0</h2>
  <h2 id="fifth">0</h2>

</div>

Answer 1

我马上看到了几个问题。

首先你有两次var f = 0。
你有 f + 1; 和 s + 1; 但这些语句没有 return 任何东西，你想要 s++; 和 f++; 或 s+=1;和 f+=1; 如果您希望 s 和 f 变量递增。
您的 if 条件使用 =，它用于赋值，因此将始终 return true，而不是 ==（与转换相等）或者更好的是，===（严格相等）。

解决这些问题可能会让您振作起来运行。

但是，这个解决方案也太复杂了。

首先，you should not be using inline HTML event attributes（onclick，等等）相反，您应该在 JavaScript.[=45= 中设置所有事件处理]
接下来，对于您要尝试做的事情，您的变数似乎太多了。据我所知，确实不需要 status 。如果你在 stop 函数中，很明显你被阻止了。如果你在timer函数中，你必须启动。我也不认为需要 f、s、f2 和 t 变量或跟踪它们的代码。
您忘记检查 mSec 是否是单个数字并在这些情况下添加 0。
仅当您提供的字符串包含需要由浏览器解析的 HTML 时才使用 .innerHTML。如果字符串中没有 HTML，HTML 解析器将无缘无故地被调用，这是一种资源浪费。对于 non-HTML 字符串，使用 .textContent.
您也不需要提前为结果设置空 <h2> 占位符。您可以即时创建它们，这样就会有更少的 HTML 和更少的 JavaScript 来尝试测试它们并匹配它们。
关于 <h2> 评论，您应该使用标签是因为它们传达的语义，而不是因为浏览器应用于它们的默认格式。 <h1> 适合 Stopwatch 的页面标题，因为它是一个标题，但它不适合显示经过的时间，因为它不是节标题。而且，为了显示点击之间的不同时间，项目符号列表是合适的，因为您正在制作一个列表。为工作使用正确的标签，然后使用 CSS 设置任何你想要的样式。
并且，通过将创建 00:00:00 字符串的代码分离到它自己的函数中，您可以在需要创建该格式时调用它。

我相信我已经完成了下面您想要的。解释见评论：

var time = 0;         // Store the elapsed time count
var timeout = null;   // Will hold a reference to the setTimeout
var lastTime = null;  // Stores the time count when the stop button was last pressed

// Get all the DOM references you'll be working with, just once
// and make them available to all the functions so you don't need
// to keep finding them over and over.
var btnStart = document.getElementById("startBtn");
var btnStop = document.getElementById("stopBtn");
var btnReset = document.getElementById("resetBtn");
var timerLabel = document.getElementById('timerLabel');
var results = document.getElementById("results");

// Set up your event handlers in JavaScript, not in HTML
btnStart.addEventListener("click", start);
btnStop.addEventListener("click", stop);
btnReset.addEventListener("click", reset);

function start() {
  btnStart.disabled = true;
  timeout = setTimeout(function(){
    time++;                                           // Increment time count
    timerLabel.textContent = getFormattedTime(time);  // Update counter with formatted time
    start();                                          // Run timer again
  }, 10);
}

function stop() {
  clearTimeout(timeout);                               // Stop the timer  
  var li = document.createElement("li");               // Create a new <li> element
  li.textContent = getFormattedTime(time - lastTime);  // Set the text for the element
  lastTime = time;                                     // Store the time that the timer stopped  
  results.appendChild(li);                             // Add the <li> to the static <ul>
  btnStart.disabled = false;                           // Disable the start button
}

function reset(){
  clearTimeout(timeout);                    // Stop the timer  
  time = 0;                                 // Reset the time
  lastTime = 0;                             // Reset the last time
  timerLabel.textContent = '00:00:00';      // Reset the time label
  btnStart.disabled = false;                // Enable the start button
  results.innerHTML = "";                   // Clear out the static <ul>
}

// This function accepts the time count and retuns it in a 00:00:00 format
function getFormattedTime(timeVal){
  var min = Math.floor(timeVal/100/60);
  var sec = Math.floor(timeVal/100);
  var mSec = timeVal % 100;
  if(min < 10)  { min = "0" + min; }
  if(sec >= 60) { sec = sec % 60;  }
  if(sec < 10) {
    if(sec === 0) {
      sec = "00";
    } else {
      sec = "0" + sec;
    }
  }
  if(mSec < 10) {
    if(mSec === 0) {
      mSec = "00";
    } else {
      mSec = "0" + mSec;
    }
  }   
  
  return min + ":" + sec + ":" + mSec;
}

/* Make elapsed time area stand out */
#timerLabel {
  font-size:2em;
  font-weight:bold;
  margin-bottom:1em;
  background-color:#ff00ff;
  font-family:Arial, Helvetica, sans-serif;
  display:inline-block;
  padding:15px;
  width:10em;
  text-align:center;
}

ul { padding:0; }              /* remove default indentation of list */
li { list-style-type: none; }  /* remove standard bullet discs */
li::before { content: " - "; } /* place a dash before each list item instead */

<div class="container">
  <h1 class="title">Stopwatch</h1>
  <div id="timerLabel">00:00:00</div>
  <div>
    <input type="button" value="START" class="button" id="startBtn">
    <input type="button" value="STOP" class="button" id="stopBtn">
    <input type="button" value="RESET" class="button" id="resetBtn">
  </div>
  <ul id="results"></ul>
</div>

如何记录多个时间值，一个接一个

How do I record multiple time values, one after another

html

javascript

timer

innerhtml