javascript - 倒计时栏Javascript不减少

Question

我有一个倒计时进度条的 JS 代码，它应该采用时间值并减少直到时间到达，然后显示 EXPIRED。

function progress(timeleft, timetotal, $element) {
  var bar = document.getElementById("#progressBar")
  var progressBarWidth = (timeleft * bar.width()) / timetotal
  console.log("width is" + bar.width() + "time left is" + timeleft)
  $element.find("div").animate({
    width: progressBarWidth
  }, timeleft == timetotal ? 0 : 1000, "linear")

  if (timeleft > 0) {
    setTimeout(function() {
      progress(timeleft - 1, timetotal, $element)
    }, 1000)
  }
}

progress(180, 180, $("#progressBar"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="progressBar">
  <div></div>
</div>

问题是我在这里将其设置为 3 分钟进行测试，并且 bar 没有减少。我已经通过控制台进行了调试，'bar.width()' 似乎是未定义的。任何想法如何解决它？谢谢！

标签： javascriptcountdown

Answer 1

这不应该

var bar = document.getElementById("#progressBar")

成为这个

var bar = document.getElementById("progressBar")

https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

和

bar.width()

是

bar.clientWidth

https://developer.mozilla.org/en-US/docs/Web/API/Element