Question

我有一个接一个打印5个不同值的问题。我的代码应该像这样工作：

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

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

这是我的代码：

＆＃13;

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);
  }
}

＆＃13;

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

＆＃13;

Answer 1

我马上就看到了几个问题。

首先，您有var f = 0两次。
您有f + 1;和s + 1;，但这些陈述不会返回任何内容，您需要s++;和f++;或s+=1;和f+=1;如果您希望s和f变量增加。
您的if条件使用=，这是用于分配的，因此将始终返回true，而不是==（与转化相等）或更好，{{ 1}}（严格平等）。

修复这些问题可能会让您启动并运行。

但是，你在这个解决方案中也有太多的复杂功能。

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

我相信我已经完成了你想要的东西。请参阅注释以获取解释：

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 */

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

1 个答案: