2023年2月18日 20:21:25go评论73阅读模式

英文:

StopWatch is not working when I click on Stop Button

问题

这是你提供的代码的翻译：

// 获取元素
let start = document.getElementById("start");
let stop = document.getElementById("stop");
let reset = document.getElementById("reset");
let h3 = document.getElementById("h3");
let time = document.getElementById("time");
let h3CreateMin = document.createElement("h3");
let h3CreateHour = document.createElement("h3");
let milisecond = document.getElementById("milisecond");
let second = document.getElementById("second");
let minSpan = document.createElement("span");
let minSpanSigin = document.createElement("span");
let hourSpan = document.createElement("span");
let hourSpanSigin = document.createElement("span");

let secStart = 0;
let miliSecStart = 0;
let minStart = 0;
let hourStart = 0;
let s = true;

// 开始按钮点击事件
start.addEventListener("click", function () {
  reset.style.display = "block";
  stop.style display = "block";
  start.style.display = "none";

  // 毫秒开始
  miliSecondStop = setInterval(() => {
    let miliSec = miliSecStart + 1;
    milisecond.innerText = miliSec;
    miliSecStart = miliSec;
    if (miliSecStart === 99) {
      miliSecStart = 0;
    }
  }, 10);

  // 秒开始
  secondStop = setInterval(() => {
    let sec = secStart + 1;
    secStart = sec;
    second.innerText = secStart;
    if (sec === 60) {
      secStart = 0;
    }
  }, 1000);

  // 分开始
  minStop = setInterval(() => {
    let min = minStart + 1;
    if (s === true) {
      time.prepend(h3CreateMin);
    }
    h3CreateMin.style.display = "block";
    h3CreateMin.append(minSpan);
    minSpan.classList = "value";
    h3CreateMin.classList = "time_s_m_h";
    h3CreateMin.append(minSpanSigin);
    minSpanSigin.classList = "sigin";
    minSpanSigin.innerText = "M";
    minStart = min;
    minSpan.innerText = min;
    if (min === 60) {
      minStart = 0;
    }
    s = false;
  }, 60000);

  // 小时开始
  hourStop = setInterval(() => {
    let hour = hourStart + 1;
    time.prepend(h3CreateHour);
    h3CreateHour.style.display = "block";
    h3CreateHour.classList = "time_s_m_h";
    h3CreateHour.append(hourSpan);
    hourSpan.classList = "value";
    h3CreateHour.append(hourSpanSigin);
    hourSpanSigin.classList = "sigin";
    hourSpanSigin.innerText = "H";
    hourSpan.innerText = hour;
    hourStart = hour;
    if (hour === 24) {
      hourStart = 0;
    }
  }, 60000);
});

// 停止按钮点击事件
stop.addEventListener("click", function () {
  start.style.display = "block";
  stop.style.display = "none";
  clearInterval(miliSecondStop);
  clearInterval(secondStop);
  clearInterval(minStop);
  clearInterval(hourStop);
});

// 重置按钮点击事件
reset.addEventListener("click", function () {
  start.style.display = "block";
  stop.style.display = "none";
  clearInterval(miliSecondStop);
  miliSecStart = 0;
  milisecond.innerText = "00";
  clearInterval(secondStop);
  secStart = 0;
  second.innerText = 0;
  clearInterval(minStop);
  minStart = 0;
  h3CreateMin.style.display = "none";
  clearInterval(hourStop);
  hourStart = 0;
  h3CreateHour.style.display = "none";
});

/* CSS 样式 */
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  color: white;
}

main {
  width: 100%;
  height: 500px;
  background-color: #FEA600;
  display: flex;
  flex-direction: column;
  align-items: center;
}

main div:first-child {
  margin-top: 20px;
}

main div:first-child h1, main div:first-child h2, main div:first-child h3 {
  font-size: 4rem;
  font-weight: 100;
  text-align: center;
  margin-top: 20px;
}

main div:first-child #time {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

main div:first-child #time .time_s_m_h {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100px;
  margin: 5px;
}

main div:first-child h3 .sigin {
  font-size: 2rem;
}

main div:first-child h3 #milisecond {
  display: inline-block;
  width: 50px;
}

main div:last-child {
  display: flex;
}

main div:last-child button {
  padding: 20px;
  width: 150px;
  background-color: #FEA600;
  font-size: 25px;
  margin: 10px;
  border: 1px solid #ffffff;
  cursor: pointer;
}

#stop, #reset {
  display: none;
}

<!-- HTML 结构 -->
<body>
  <main>
    <div>
      <h1>STOP WATCH</h1>
      <div id="time">
        <h3 class="time_s_m_h">
          <span id="second" class="value">0</span>
          <span class="sigin">S</span>
        </h3>
        <h3 id="h3">
          <span id="milisecond" class="sigin">00</span>
        </h3>
      </div>
    </div>
    <div id="btnDiv">
      <button id="start">Start</button>
      <button id="stop">Stop</button>
      <button id="reset">Reset</button>
    </div>
  </main>
  <script src="app.js"></script>
</body>

英文:

It's difficult to identify the exact issue, My StopWatch is not working when I click on Stop Button and wait for some second then I click on start button then I see that my second is working fine but minutes is not working properly. please check that is there any issue

    let start = document.getElementById(&quot;start&quot;);
let stop = document.getElementById(&quot;stop&quot;);
let reset = document.getElementById(&quot;reset&quot;);
let h3 = document.getElementById(&quot;h3&quot;);
let time = document.getElementById(&quot;time&quot;);
let h3CreateMin = document.createElement(&quot;h3&quot;);
let h3CreateHour = document.createElement(&quot;h3&quot;);
let milisecond = document.getElementById(&quot;milisecond&quot;);
let second = document.getElementById(&quot;second&quot;);
let minSpan = document.createElement(&quot;span&quot;);
let minSpanSigin = document.createElement(&quot;span&quot;);
let hourSpan = document.createElement(&quot;span&quot;);
let hourSpanSigin = document.createElement(&quot;span&quot;);
let secStart = 0;
let miliSecStart = 0;
let minStart = 0;
let hourStart = 0;
let s = true;
start.addEventListener(&quot;click&quot;, function () {
reset.style.display = &quot;block&quot;;
stop.style.display = &quot;block&quot;;
start.style.display = &quot;none&quot;;
miliSecondStop = setInterval(() =&gt; {
let miliSec = miliSecStart + 1;
milisecond.innerText = miliSec;
miliSecStart = miliSec;
if (miliSecStart === 99) {
miliSecStart = 0;
}
}, 10);
// Sec Start
secondStop = setInterval(() =&gt; {
let sec = secStart + 1;
secStart = sec;
second.innerText = secStart;
if (sec === 60) {
secStart = 0;
}
}, 1000);
//   Min Start
minStop = setInterval(() =&gt; {
let min = minStart + 1;
if (s === true) {
time.prepend(h3CreateMin);
}
h3CreateMin.style.display = &quot;block&quot;;
h3CreateMin.append(minSpan);
minSpan.classList = &quot;value&quot;;
h3CreateMin.classList = &quot;time_s_m_h&quot;;
h3CreateMin.append(minSpanSigin);
minSpanSigin.classList = &quot;sigin&quot;;
minSpanSigin.innerText = &quot;M&quot;;
minStart = min;
minSpan.innerText = min;
if (min === 60) {
minStart = 0;
}
s = false;
}, 60000);
// 60000
// Hour Start
hourStop = setInterval(() =&gt; {
let hour = hourStart + 1;
time.prepend(h3CreateHour);
h3CreateHour.style.display = &quot;block&quot;;
h3CreateHour.classList = &quot;time_s_m_h&quot;;
h3CreateHour.append(hourSpan);
hourSpan.classList = &quot;value&quot;;
h3CreateHour.append(hourSpanSigin);
hourSpanSigin.classList = &quot;sigin&quot;;
hourSpanSigin.innerText = &quot;H&quot;;
hourSpan.innerText = hour;
hourStart = hour;
if (hour === 24) {
hourStart = 0;
}
}, 60000);
//    3600000
});
stop.addEventListener(&quot;click&quot;, function () {
start.style.display = &quot;block&quot;;
stop.style.display = &quot;none&quot;;
clearInterval(miliSecondStop);
clearInterval(secondStop);
clearInterval(minStop);
clearInterval(hourStop);
});
reset.addEventListener(&quot;click&quot;, function () {
start.style.display = &quot;block&quot;;
stop.style.display = &quot;none&quot;;
clearInterval(miliSecondStop);
miliSecStart = 0;
milisecond.innerText = &quot;00&quot;;
clearInterval(secondStop);
secStart = 0;
second.innerText = 0;
clearInterval(minStop);
minStart = 0;
h3CreateMin.style.display = &quot;none&quot;;
clearInterval(hourStop);
hourStart = 0;
h3CreateHour.style.display = &quot;none&quot;;
});

    *{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
main{
width: 100%;
height: 500px;
background-color: #FEA600;
display: flex;
flex-direction: column;
align-items: center;
}
main div:first-child{
margin-top: 20px;
}
main div:first-child h1, main div:first-child h2,main div:first-child h3{
font-size: 4rem;
font-weight: 100;
text-align: center;
margin-top: 20px;
}
main div:first-child #time{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
main div:first-child #time .time_s_m_h{
display: flex;
/* border: 1px solid rgb(0, 8, 255); */
align-items: flex-end;
justify-content: center;
width: 100px;
margin: 5px;
}
main div:first-child h3 .sigin{
font-size: 2rem;
/* border: 1px solid green; */
}
main div:first-child h3 #milisecond{
display: inline-block;
width: 50px;
/* border: 1px solid green; */
}
main div:last-child{
display: flex;
}
main div:last-child button{
padding: 20px;
width: 150px;
background-color: #FEA600;
font-size: 25px;
margin: 10px;
border:1px solid #ffffff;
cursor: pointer;
}
#stop,#reset{
display: none;
}

HTML 
&lt;body&gt;
&lt;main&gt;
&lt;div&gt;
&lt;h1&gt;STOP WATCH&lt;/h1&gt;
&lt;!-- &lt;h2&gt;Vanilla JavaScript stopwatch&lt;/h2&gt; --&gt;
&lt;div id=&quot;time&quot;&gt;
&lt;h3 class=&quot;time_s_m_h&quot;&gt;
&lt;span id=&quot;second&quot; class=&quot;value&quot;&gt;0&lt;/span&gt;
&lt;span class=&quot;sigin&quot;&gt;S&lt;/span&gt; 
&lt;/h3&gt;
&lt;h3 id=&quot;h3&quot;&gt;
&lt;span id=&quot;milisecond&quot; class=&quot;sigin&quot;&gt;00&lt;/span&gt;
&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;btnDiv&quot;&gt;
&lt;button id=&quot;start&quot;&gt;Start&lt;/button&gt;
&lt;button id=&quot;stop&quot;&gt;Stop&lt;/button&gt;
&lt;button id=&quot;reset&quot;&gt;Reset&lt;/button&gt;
&lt;/div&gt;
&lt;/main&gt;
&lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;

答案1

得分: 1

你应该使用一个定时器来计数。
你的代码对于秒数也无法正常工作。
如果你快速点击启动和停止，秒数标签不会增加。
这是因为当你点击启动和停止时，所有计时器都会被重置。
所以你应该使用一个定时器。

英文:

You should use one timer to count.
Your code does not work exactly for second too.
If you click start and stop quickly, scond label will not increase.
It's because when you click start and stop, all timer will be reset.
So you should use one timer.

let start = document.getElementById(&quot;start&quot;);
let stop = document.getElementById(&quot;stop&quot;);
let reset = document.getElementById(&quot;reset&quot;);
let h3 = document.getElementById(&quot;h3&quot;);
let time = document.getElementById(&quot;time&quot;);
let h3CreateMin = document.createElement(&quot;h3&quot;);
let h3CreateHour = document.createElement(&quot;h3&quot;);
let milisecond = document.getElementById(&quot;milisecond&quot;);
let second = document.getElementById(&quot;second&quot;);
let minSpan = document.createElement(&quot;span&quot;);
let minSpanSigin = document.createElement(&quot;span&quot;);
let hourSpan = document.createElement(&quot;span&quot;);
let hourSpanSigin = document.createElement(&quot;span&quot;);    
let miliSec = 0;
let s = true;
start.addEventListener(&quot;click&quot;, function () {
reset.style.display = &quot;block&quot;;
stop.style.display = &quot;block&quot;;
start.style.display = &quot;none&quot;;
miliSecondStop = setInterval(() =&gt; {
miliSec++;
let milsecText =  miliSec % 100;
let secText = (parseInt(miliSec / 100)) % 60;
let minText = (parseInt(miliSec / 6000)) % 60;
let hourText = parseInt(miliSec / 360000);
milisecond.innerText = milsecText;      
second.innerText = secText;       
if(minText&gt;0){
time.prepend(h3CreateMin);
h3CreateMin.style.display = &quot;block&quot;;
h3CreateMin.append(minSpan);
minSpan.classList = &quot;value&quot;;
h3CreateMin.classList = &quot;time_s_m_h&quot;;
h3CreateMin.append(minSpanSigin);
minSpanSigin.classList = &quot;sigin&quot;;
minSpanSigin.innerText = &quot;M&quot;;
minSpan.innerText = minText;   
}
if(hourText &gt; 0){
time.prepend(h3CreateHour);
h3CreateHour.style.display = &quot;block&quot;;
h3CreateHour.classList = &quot;time_s_m_h&quot;;
h3CreateHour.append(hourSpan);
hourSpan.classList = &quot;value&quot;;
h3CreateHour.append(hourSpanSigin);
hourSpanSigin.classList = &quot;sigin&quot;;
hourSpanSigin.innerText = &quot;H&quot;;
hourSpan.innerText = hourText;
}
}, 10);
});
stop.addEventListener(&quot;click&quot;, function () {
start.style.display = &quot;block&quot;;
stop.style.display = &quot;none&quot;;
clearInterval(miliSecondStop);
});
reset.addEventListener(&quot;click&quot;, function () {
start.style.display = &quot;block&quot;;
stop.style.display = &quot;none&quot;;
clearInterval(miliSecondStop);
miliSec = 0;
milisecond.innerText = &quot;00&quot;;
h3CreateMin.style.display = &quot;none&quot;;
h3CreateHour.style.display = &quot;none&quot;;
});

*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
color: white;
}
main{
width: 100%;
height: 500px;
background-color: #FEA600;
display: flex;
flex-direction: column;
align-items: center;
}
main div:first-child{
margin-top: 20px;
}
main div:first-child h1, main div:first-child h2,main div:first-child h3{
font-size: 4rem;
font-weight: 100;
text-align: center;
margin-top: 20px;
}
main div:first-child #time{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
main div:first-child #time .time_s_m_h{
display: flex;
/* border: 1px solid rgb(0, 8, 255); */
align-items: flex-end;
justify-content: center;
width: 100px;
margin: 5px;
}
main div:first-child h3 .sigin{
font-size: 2rem;
/* border: 1px solid green; */
}
main div:first-child h3 #milisecond{
display: inline-block;
width: 50px;
/* border: 1px solid green; */
}
main div:last-child{
display: flex;
}
main div:last-child button{
padding: 20px;
width: 150px;
background-color: #FEA600;
font-size: 25px;
margin: 10px;
border:1px solid #ffffff;
cursor: pointer;
}
#stop,#reset{
display: none;
}

HTML 
&lt;body&gt;
&lt;main&gt;
&lt;div&gt;
&lt;h1&gt;STOP WATCH&lt;/h1&gt;
&lt;!-- &lt;h2&gt;Vanilla JavaScript stopwatch&lt;/h2&gt; --&gt;
&lt;div id=&quot;time&quot;&gt;
&lt;h3 class=&quot;time_s_m_h&quot;&gt;
&lt;span id=&quot;second&quot; class=&quot;value&quot;&gt;0&lt;/span&gt;
&lt;span class=&quot;sigin&quot;&gt;S&lt;/span&gt; 
&lt;/h3&gt;
&lt;h3 id=&quot;h3&quot;&gt;
&lt;span id=&quot;milisecond&quot; class=&quot;sigin&quot;&gt;00&lt;/span&gt;
&lt;/h3&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&quot;btnDiv&quot;&gt;
&lt;button id=&quot;start&quot;&gt;Start&lt;/button&gt;
&lt;button id=&quot;stop&quot;&gt;Stop&lt;/button&gt;
&lt;button id=&quot;reset&quot;&gt;Reset&lt;/button&gt;
&lt;/div&gt;
&lt;/main&gt;
&lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
&lt;/body&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

StopWatch在我点击停止按钮时不起作用

问题

答案1

JavaScript高级数组操作

splice objects from array and move those elements to a different element within array without mutating original

Vite：在使用绝对导入时无法构建枚举（TypeScript）。

如何在状态由未定义的道具初始化时保护防止应用程序崩溃？

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论