我的StopwatchApp仅倒计时一秒钟,然后停止工作。问题是什么? (JavaScript)

问题描述 投票:-2回答:1

我目前正在使用秒表应用程序,您可以在其中设置值(以分钟,秒和小时为单位),它会倒计时直到达到零。问题在于它只会掉一秒钟然后完全停止工作。这是什么问题?

let hours = document.getElementById('hours')
let mins = document.getElementById('minutes')
let secs = document.getElementById('seconds')
let submit = document.getElementById('submit')
let time = document.getElementById('time')
let runningProgramKey = null;

submit.addEventListener('click', startTimer)

function startTimer() {
  //window.variable is not a flaw, I am using it to define a global variable inside the function
  window.hoursX = Math.abs(parseInt(hours.value)) || 0;
  window.minsX = Math.abs(parseInt(mins.value)) || 0
  window.secsX = Math.abs(parseInt(secs.value)) || 0
  window.timeX = `${hoursX}:${minsX}:${secsX}`
  time.textContent = timeX;
  runTime();
}

function runTime() {
  if (runningProgramKey) clearInterval(runningProgramKey);
   runningProgramKey = setInterval(() => {
    time.textContent = updateTime(hoursX,minsX,secsX);
  },1000)
}

function updateTime(hours,minutes,seconds) {
  //I know I can use ternary operators however I am not (for a reason)
  if (seconds - 1 > 0) {
    seconds--;
    if (minutes >= 1 && seconds === 0) {
      minutes--;
    }
  }
  return `${hours}:${minutes}:${seconds}`;
}

function clearTime() {

}
<!DOCTYPE html>
  <html>
  <head>
    <title>StopwatchApp</title>
    <script defer src='script.js'></script>
  </head>
  <body>
    <div>
      <input id='hours' type='text' placeholder="Hours">
      <input id='minutes' type='text' placeholder="Minutes">
      <input id='seconds' type='text' placeholder="Seconds">
      <input id='submit' type='button' value='Go'>
    </div>
    <h1 id='time'>HH:MM:SS</h1>
  </body>
  </html>

[为了澄清和节省人们的时间,错误不是if (runningProgramKey) clearInterval(runningProgramKey);我知道,因为我做了很多事情,甚至注释了该行,错误仍然继续。

要查看发生的情况的可视化,请按run snippet,该代码应在我的代码下。它为您提供了关于问题所在的另一个清晰思路。

我的代码尚未完成,因此某些功能会受到质疑,例如,秒数从0停止。这不是一个完整的脚本,我来获得有关错误的帮助,以便我可以继续从事该项目。

javascript dom
1个回答
0
投票

当您将数字作为参数传递给函数时,会在堆栈中创建参数的副本,如果您更改变量,则其副本将更改,而原始变量将不会更改。您应该使用全局变量。

function updateTime() {
  //I know I can use ternary operators however I am not (for a reason)
  if (secsX- 1 > 0) {
    secsX--;
    if (minsX>= 1 && secsX=== 0) {
      minsX--;
    }
  }
  return `${hoursX}:${minsX}:${secsX}`;
}
© www.soinside.com 2019 - 2024. All rights reserved.