倒计时栏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()' 似乎是未定义的。任何想法如何解决它？谢谢！

Answer 1

这不应该var&nbsp;bar&nbsp;=&nbsp;document.getElementById("#progressBar")成为这个var&nbsp;bar&nbsp;=&nbsp;document.getElementById("progressBar")https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById和bar.width()是bar.clientWidthhttps://developer.mozilla.org/en-US/docs/Web/API/Element

Answer 2

您已经在传递$element, 即IS bar。function progress(timeleft, timetotal, $element) {&nbsp; var progressBarWidth = (timeleft * $element.width()) / timetotal&nbsp; console.log(`width: ${$element.width()} px&nbsp; |&nbsp; time left: ${timeleft} sec`)&nbsp; $element.find("div").animate({&nbsp; &nbsp; width: progressBarWidth&nbsp; }, timeleft == timetotal ? 0 : 1000, "linear")&nbsp; if (timeleft > 0) {&nbsp; &nbsp; setTimeout(progress, 1000, timeleft - 1, timetotal, $element)&nbsp; }}progress(60, 60, $("#progressBar"))#progressBar div {&nbsp; background: green;&nbsp; height: 1em;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="progressBar">&nbsp; <div></div></div>注意：您可以setTimeout在不创建嵌套函数调用的情况下调用。超时后的参数（第二个参数）将被传递到回调函数中。替换这个：if (timeleft > 0) {&nbsp; setTimeout(function() {&nbsp; &nbsp; progress(timeleft - 1, timetotal, $element)&nbsp; }, 1000)}有了这个：if (timeleft > 0) {&nbsp; setTimeout(progress, 1000, timeleft - 1, timetotal, $element)}jQuery插件！这是一个jQuery插件版本(($) => {&nbsp; const init = ($bar) => {&nbsp; &nbsp; if ($bar.find('div').length === 0) $bar.append($('<div>'));&nbsp; }&nbsp; const run = ($bar, duration, timeRemaining, callback) => {&nbsp; &nbsp; update($bar, duration, timeRemaining)&nbsp; &nbsp; if (timeRemaining > 0) {&nbsp; &nbsp; &nbsp; setTimeout(tick, 1000, $bar, duration, timeRemaining, callback)&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; callback()&nbsp; &nbsp; }&nbsp; }&nbsp; const update = ($bar, duration, timeRemaining) => {&nbsp; &nbsp; const width = (timeRemaining * $bar.width()) / duration&nbsp; &nbsp; $bar.find('div').animate({&nbsp; &nbsp; &nbsp; width: width&nbsp; &nbsp; }, timeRemaining == duration ? 0 : 1000, 'linear')&nbsp; }&nbsp; const tick = ($bar, duration, timeRemaining, callback) => {&nbsp; &nbsp; run($bar, duration, timeRemaining - 1, callback)&nbsp; }&nbsp; $.fn.progress = function(duration, timeRemaining, callback) {&nbsp; &nbsp; init(this)&nbsp; &nbsp; run(this, duration, timeRemaining, callback);&nbsp; &nbsp; return this&nbsp; }})(jQuery);$('#progress-bar-1').progress(10, 10, () => {&nbsp; console.log('Task #1 completed!')})$('#progress-bar-2').progress(5, 5, () => {&nbsp; console.log('Task #2 completed!')})div[id^="progress-bar"] div {&nbsp; background: green;&nbsp; height: 1em;&nbsp; margin-bottom: 0.5em;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="progress-bar-1"></div><div id="progress-bar-2"></div>