CountUp 函数无法从 0 递增到输入时间

Question

本期详情及代码如下：

问题： countUp 函数运行没有错误，但是 UI 显示输入的数字，之前没有任何内容。

当前方法：

 const countUp = () => {
  let inputTime = document.getElementById("input").value; // 5
  console.log(inputTime);

  if (inputTime != 0) { // 5 != 0
    document.getElementById("countupClock").innerHTML = 0;
    let run = run => { // 5 > 0
      let clock = document.getElementById("countupClock");
      clock.value = clock.value < inputTime ? clock.value++ : inputTime;
      clock.innerHTML = clock.value;
     }
    setInterval(run(), 3000);
    } else {
      clearInterval(run);
    };
  }

这就是我目前所掌握的实际 CountUp 函数。

点击事件在这里处理：

// Begin Countup:
let btn = document.getElementById("enterTime");

btn.addEventListener("click", () => {
  console.log("New Time Entered");
  countUp();
});

那么这是HTML:

          <html>
          <body>
            <div class="controls">
                    <p id="countup">Countup</p>
                </div>
    
            <div class="center-controls">
                <input type="number" id="input" placeholder="Enter a number"> 
            </input>
            </div>
            <div class="right-controls">
                <button id="enterTime">START</button>
            </div>      
        </div>
    </main>
        <div class="clocksContainer">
        <!-- Displays Time counting down  -->
    
            <span id="countupClock"></span>
            
        <!-- A Field that allows you to enter a time to countup from -->
        </div>
    
        <script src="script.js"></script>
    </body>
    </html>

预期输出： UI 上的数字应从 0 递增到用户输入的数字。在这种情况下，5.

Answer 1

clock变量是跨度元素，它没有value属性。只需执行 clock.innerHTML++ 即可增加显示的计数器值。此外，您应该保存 setInterval 值并在 clearInterval.

中使用它

const countUp = () => {
  let interval;
  let inputTime = document.getElementById('input').value; // 5
  console.log(inputTime);

  if (inputTime != 0) {
    document.getElementById('countupClock').innerHTML = 0;
    let run = () => {
      let clock = document.getElementById('countupClock');
      if (clock.innerHTML < inputTime) {
        clock.innerHTML++;
        console.log('Counter value:', clock.innerHTML);
      } else {
        clearInterval(interval);
        console.log('Cleared interval');
      }
    };
    interval = setInterval(run, 1000);
  }
};

CountUp 函数无法从 0 递增到输入时间

CountUp Function failing to increment from 0 to inputted time

javascript

timer

setinterval