创建一个 20 秒的计时器不起作用，我试图理解为什么

Creating a 20 second timer doesn't work and I'm trying to understand why

提问人：Rafaela 提问时间：11/11/2023 更新时间：11/11/2023 访问量：61

问：

我一直在尝试在我的网站中实现以下代码：

let count = 20;
const timer = setInterval(function() {
  count--;
  console.log(count);
  if (count === 0) {
    clearInterval(timer);
    console.log("Time's up!");
  }
}, 1000);

<p>Your time is running out... <span id="timer"></span> sec</p>

我得到了这个跨度，我想插入倒计时，我一直在尝试许多选项，但没有一个有效。我对 JavaScript 很陌生，所以很感激我做错了什么的提示。

除其他外，我尝试了以下方法，但什么也没发生。

function startTimer () {
  let count = 20;
const timer = setInterval(function() {
  count--;
  console.log(count);
  if (count === 0) {
    clearInterval(timer);
    console.log("Time's up!");
  }
}, 1000);
  let countdown = document.getElementById("timer").innerContent;
  count = countdown;
  console.log(countdown);
}
JavaScript HTML CSS 计时器 倒计时

评论

答：

0赞 duckstery 11/11/2023 #1

我有一些建议

不要重新分配count

下面的代码会把你变成一些奇怪的东西，它会破坏你的计时器count

count = countdown;

count是 20 到 0 之间的数字。你用它来倒计时，所以顺其自然吧

调用方法

我不知道你有没有打电话。但请确保你称呼它startTimer

更改分配方式innerContent

首先，您应该改用innerText

其次，您应该将代码从

let countdown = document.getElementById("timer").innerContent;
count = countdown;

对此

let countdown = document.getElementById("timer");
countdown = count;

这将解决您的第一个问题，并将 20 设置为任何带有 .仅分配给 （not ），因为它是对象。所以它可以通过引用传递id="timer"document.getElementById("timer")countdowndocument.getElementById("timer").innerText

显示定时器

现在，您只需进行少量调整即可在屏幕上显示倒计时值

function startTimer() {
  let count = 20;
  let countdown = document.getElementById("timer");
  const timer = setInterval(function () {
    count--;
    console.log(count);
    countdown.innerText = count;
    if (count === 0) {
      clearInterval(timer);
      console.log("Time's up!");
    }
  }, 1000);
}

startTimer();

每次更改时，请替换为 的值countcountdown.innerTextcount

希望这能帮到你

评论

0赞 Rafaela 11/11/2023
嘿，你好！:)感谢您到目前为止的建议。不幸的是，它仍然不起作用 🙈
0赞 duckstery 11/11/2023
为什么不呢？怎么了？它在这里工作 codepen.io/duckstery/pen/LYqyqxZ
0赞 Rafaela 11/12/2023
好的，我发现了问题，现在它正在工作！它与您建议的代码没有任何关系。谢谢！！

上一个：阻止任务在开始之前运行

下一个：带定时器的旋转编码器编程