如何使用 Javascript 在秒表中添加圈数功能？

如何解决如何使用 Javascript 在秒表中添加圈数功能？

我正在做一个秒表，基本上我已经完成了，但我不知道如何添加研磨功能。我希望只要用户单击圈按钮，就会在“新行”上添加一个新圈。但是我无法做到这一点，这是我的代码：

let hours = 0;
let minutes = 0;
let seconds = 0;
let miliseconds = 0;

let displayMilisec = miliseconds;
let displaySec = seconds;
let displayMins = minutes;
let displayHours = hours; 

let interval = null;

let status = "stopped";

let laps = null;
let lapNow = null;

function start() {
      miliseconds++;

      if (miliseconds < 10){
            displayMilisec = "0" + miliseconds.toString();
      }
      else {
            displayMilisec = miliseconds;
      }
      
      if(seconds < 10) {
            displaySec = "0" + seconds.toString();
      }
      else {
            displaySec = seconds;
      }
      
      if(minutes < 10) {
            displayMins = "0" + minutes.toString();
      }
      else {
            displayMins = minutes;
      }
      
      if(hours < 10) {
            displayHours = "0" + hours.toString();
      }
      else {
            displayHours = hours;
      }

      if (miliseconds / 100 === 1) {
            seconds++;
            miliseconds = 0;
            if (seconds / 60 === 1) {
                  minutes++;
                  seconds = 0;
                  if (minutes / 60 === 1) {
                        hours++;
                        minutes = 0;
                  }
            }
      }



      document.getElementById("timerMilisec").innerHTML = displayMilisec;
      document.getElementById("timerSec").innerHTML = displaySec;
      document.getElementById("timerMins").innerHTML = displayMins;
      document.getElementById("timerHrs").innerHTML = displayHours;

}

function startStop() {
      if (status === "stopped") {
            interval = window.setInterval(start,10);
            document.getElementById('startBtn').innerHTML = "Stop";
            status = "started";
      }
      else {
            window.clearInterval(interval);
            document.getElementById('startBtn').innerHTML = "Start";
            status = "stopped";
      }
}

function reset() {
      window.clearInterval(interval);
      miliseconds = 0;
      seconds = 0;
      minutes = 0;
      hours = 0;
      document.getElementById("timerMilisec").innerHTML = "00";
      document.getElementById("timerSec").innerHTML = "00";
      document.getElementById("timerMins").innerHTML = "00";
      document.getElementById("timerHrs").innerHTML = "00";
      document.getElementById('startBtn').innerHTML = "Start";
      status = "stopped";
}

function lap() {

      lapNow = hours + " : " + minutes + " : " + seconds + " : " + miliseconds; 
      laps = document.getElementById('lapRecord').innerHTML + lapNow;

      document.getElementById('lapRecord').innerHTML = laps;
}

body {
        height: 100vh;
        margin: 40px 0px 0px 0px;
        background-color: #58e065;
        display: flex;
        justify-content: center;
        overflow: hidden;
}

.display {
        display: flex;
        left: 50%;
        align-items: center;
        justify-content: center;
        font-family: "nunito","poppins",sans-serif;
        font-weight: 700;
        font-size: 60px;
        color: white;
        text-shadow: 3px 3px 0px rgba(150,150,1);
}

p {
        margin: 5px;
}

.buttons {
        display: flex;
        justify-content: center;
}

button {
        cursor: pointer;
        height: 30px;
        width: 80px;
        border: none;
        outline: none;
        border-radius: 4px;
        background-color: #3b85ed;
        font-family: "nunito",sans-serif;
        font-size: 18px;
        font-weight: 700;
        color: white;
        Box-shadow: 3px 3px 0px #224f8f;
        margin: 4px;
}
button:hover {
        background-color: #224f8f;
}

h1 {
        position: sticky;
        background-color: #ff961d;
        display: flex;
        justify-content: center;
        margin: 30px;
        font-family: "nunito",sans-serif;
        font-size: 40px;
        font-weight: 700;
        color: white;
        text-shadow: 3px 3px 0px rgba(150,1);
        border-radius: 10px;
        Box-shadow: 3px 3px 0px rgb(179,101,0);
}

#header {
        width: 100%;
        height: 100px;
        position: sticky;
}

#laps {
        margin-top: 40px;
        height: 400px;
        scroll-behavior: smooth;
}

<div class="wrapper" id="wrapper">
                <div class="display">
                        <p class="timerdisplay" id="timerHrs">00</p> :
                        <p class="timerdisplay" id="timerMins">00</p> :
                        <p class="timerdisplay" id="timerSec">00</p> :
                        <p class="timerdisplay" id="timerMilisec">00</p>
                </div>

                <div class="buttons">
                        <button type="button" id="startBtn" onclick="startStop()">Start</button>
                        <button type="button" id="resetBtn" onclick="reset()">Reset</button>
                        <button type="button" id="lapBtn">Lap</button>
                </div>

                <h1>Laps:</h1>

                <div id="laps">
                        <p id="lapRecord">

                        </p>
                </div>
        </div>

我使用了一种非常糟糕的方法来做到这一点，但是是的，一旦知道如何添加该圈数功能，我肯定会改进它。我很感激你对代码的解释，因为我只是一个编码初学者，我仍然不太了解。非常感谢您阅读我的问题。

解决方法

那么，我已经编辑了代码并实现了单圈功能。这就是我所做的。

我建议您停止使用内联 html 事件侦听器 (onclick)。所以我用 onclicks

替换了所有的 addEventListener('click')

从 DOM 中选择元素对文档的性能影响很大，因此我将所有 ids 分配给一个变量，因为这些元素被大量使用。

在 lap 函数中，我使用模板字符串将时间连接在一起，并将它们包装在一个 <div></div> 标签中，类别为 lap，以防您想稍后对圈数进行样式设置。>

我还删除了一行 { } 语句周围的花括号 (ifelse) 以减少代码中的行数。

您可以在代码段中进行测试。 :-)

const lapBtn = document.getElementById('lapBtn');
const timerMilliSec = document.getElementById('timerMilliSec');
const timerSec = document.getElementById('timerSec');
const timerMins = document.getElementById('timerMins');
const timerHrs = document.getElementById('timerHrs');
const startBtn = document.getElementById('startBtn');
const resetBtn = document.getElementById('resetBtn');
const lapRecord = document.getElementById('lapRecord');

let hours = 0;
let minutes = 0;
let seconds = 0;
let miliseconds = 0;

let displayMilisec = miliseconds;
let displaySec = seconds;
let displayMins = minutes;
let displayHours = hours;

let interval = null;

let status = "stopped";

let lapNow = null;

function start() {
  miliseconds++;

  if (miliseconds < 10) displayMilisec = "0" + miliseconds.toString();
  else displayMilisec = miliseconds;

  if (seconds < 10) displaySec = "0" + seconds.toString();
  else displaySec = seconds;

  if (minutes < 10) displayMins = "0" + minutes.toString();
  else displayMins = minutes;

  if (hours < 10) displayHours = "0" + hours.toString();
  else displayHours = hours;

  if (miliseconds / 100 === 1) {
    seconds++;
    miliseconds = 0;

    if (seconds / 60 === 1) {
      minutes++;
      seconds = 0;

      if (minutes / 60 === 1) {
        hours++;
        minutes = 0;
      }
    }
  }



  timerMilisec.innerHTML = displayMilisec;
  timerSec.innerHTML = displaySec;
  timerMins.innerHTML = displayMins;
  timerHrs.innerHTML = displayHours;

}

function startStop() {
  if (status === "stopped") {
    interval = setInterval(start,10);
    startBtn.innerHTML = "Stop";
    status = "started";
  } else {
    clearInterval(interval);
    startBtn.innerHTML = "Start";
    status = "stopped";
  }
}

function reset() {
  clearInterval(interval);
  miliseconds = 0;
  seconds = 0;
  minutes = 0;
  hours = 0;
  timerMilisec.innerHTML = "00";
  timerSec.innerHTML = "00";
  timerMins.innerHTML = "00";
  timerHrs.innerHTML = "00";
  startBtn.innerHTML = "Start";
  lapRecord.innerHTML = '';
  status = "stopped";
}

function lap() {
  lapNow = `<div class="lap">${hours} : ${minutes} : ${seconds} : ${miliseconds}</div>`;
  lapRecord.innerHTML += lapNow;
}

lapBtn.addEventListener('click',lap);
startBtn.addEventListener('click',startStop);
resetBtn.addEventListener('click',reset);

body {
  height: 100vh;
  margin: 40px 0px 0px 0px;
  background-color: #58e065;
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.display {
  display: flex;
  left: 50%;
  align-items: center;
  justify-content: center;
  font-family: "nunito","poppins",sans-serif;
  font-weight: 700;
  font-size: 60px;
  color: white;
  text-shadow: 3px 3px 0px rgba(150,150,1);
}

p {
  margin: 5px;
}

.buttons {
  display: flex;
  justify-content: center;
}

button {
  cursor: pointer;
  height: 30px;
  width: 80px;
  border: none;
  outline: none;
  border-radius: 4px;
  background-color: #3b85ed;
  font-family: "nunito",sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: white;
  box-shadow: 3px 3px 0px #224f8f;
  margin: 4px;
}

button:hover {
  background-color: #224f8f;
}

h1 {
  position: sticky;
  background-color: #ff961d;
  display: flex;
  justify-content: center;
  margin: 30px;
  font-family: "nunito",sans-serif;
  font-size: 40px;
  font-weight: 700;
  color: white;
  text-shadow: 3px 3px 0px rgba(150,1);
  border-radius: 10px;
  box-shadow: 3px 3px 0px rgb(179,101,0);
}

#header {
  width: 100%;
  height: 100px;
  position: sticky;
}

#laps {
  margin-top: 40px;
  height: 400px;
  scroll-behavior: smooth;
}

<div class="wrapper" id="wrapper">
  <div class="display">
    <p class="timerDisplay" id="timerHrs">00</p> :
    <p class="timerDisplay" id="timerMins">00</p> :
    <p class="timerDisplay" id="timerSec">00</p> :
    <p class="timerDisplay" id="timerMilisec">00</p>
  </div>

  <div class="buttons">
    <button type="button" id="startBtn">Start</button>
    <button type="button" id="resetBtn">Reset</button>
    <button type="button" id="lapBtn">Lap</button>
  </div>

  <h1>Laps:</h1>

  <div id="laps">
    <p id="lapRecord"></p>
  </div>
</div>

如何使用 Javascript 在秒表中添加圈数功能？

如何解决如何使用 Javascript 在秒表中添加圈数功能？

解决方法

相关推荐