Question

您好我正在尝试使用下面的代码

进行进度条倒计时

function progress(timeleft, timetotal, $element) {
  var progressBarWidth = timeleft * $element.width() / timetotal;
  $element.find('div').animate({
    width: progressBarWidth
  }, 500).html(timeleft + " seconds to go");
  if (timeleft > 0) {
    setTimeout(function() {
      progress(timeleft - 1, timetotal, $element);
    }, 1000);
  }

};
progress(20, 20, $('#progressBar'));

#progressBar {
  width: 90%;
  margin: 10px auto;
  height: 22px;
  background-color: #0A5F44;
}

#progressBar div {
  height: 100%;
  text-align: right;
  padding: 0 10px;
  line-height: 22px;
  /* same as #progressBar height if we want text middle     aligned */
  width: 0;
  background-color: #CBEA00;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="progressBar">
  <div></div>
</div>

但它不起作用，当刷新页面我只看到“20秒去”没有背景栏，我不知道是什么问题请问您能告诉我这个问题的可能原因是什么？

Answer 1

可能是这样，因为每次刷新页面时Javascript都会全新加载，所以剩下的时间会被启动到相同的值。您可以使用cookie或将值与PHP相位。

Answer 2

在此编辑javascript：

function progress(timeleft, timetotal, $element) {
  var progressBarWidth = timeleft * $($element).width() / timetotal;
  $($element).find('div').animate({
    width: progressBarWidth
  }, 500).html(timeleft + " seconds to go");
  if (timeleft > 0) {
    setTimeout(function() {
      progress(timeleft - 1, timetotal, $element);
    }, 1000);
  }
};

继承人jsfiddle：https://jsfiddle.net/an1r77uo/

进度条倒计时不起作用

2 个答案: