jquery - 如何停止进度条Jquery

Question

我正在尝试创建 HTML5+CSS3 和 jQuery 进度条，假设它应该开始加载并停止，例如在其宽度的 10% 处停止，但我设法创建只计算 HTML 的最大值，在我的例子中是 10 %.

这是加载完成后进度条应该是什么样子的图片:

谁能给我一些建议，我的错误在哪里或引导我找到一些简单的解决方案？

到目前为止，这是我的代码:

HTML:

<form>
  <progress min="0 " value="0" max="10" id="firstProgressBar"></progress>
  <span class="firstProgress">0%</span>
</form>

Javascript:

var firstProgressBar = $('#firstProgressBar'),
    max = firstProgressBar.attr('max'),
    value = firstProgressBar.val(),
    time = (500/max)*10;

function firstLoading(){
    value+=1;
    var addValue = firstProgressBar.val(value);

    $('.firstProgress').html(value + '%');

    if ( value == max ) {
        clearInterval(animate);
    }

};

var animate = setInterval(function(){
    firstLoading();
}, time);

这是我作为 Fiddle 的完整代码:https://jsfiddle.net/0ekbyrt5/

Answer 1

我已经编辑了你的 jsfiddle。主要问题是 jsfiddle 没有加载 jQuery(可能是错误的 fiddle 版本)。希望这会有所帮助。

当进度值最大时，进度条满。如果您想在 10% 处停止，则必须将进度的最大值除以 10 作为要在进度条上设置的最大值。

注意:我将最大值设置为 100 只是为了显示从 1% 到 10% 的进度。

var firstProgressBar = $('#firstProgressBar'),
  max = firstProgressBar.attr('max') / 10,
  value = firstProgressBar.val(),
  time = (500 / max) * 10;

function firstLoading() {
  value += 1;
  var addValue = firstProgressBar.val(value);

  $('.firstProgress').html(value + '%');

  if (value >= max) {
    clearInterval(animate);
  }

};

var animate = setInterval(function() {
  firstLoading();
}, time);

progress::-webkit-progress-bar {
  width: 248px;
  height: 14px;
  background-color: #e3e3e3;
  border-radius: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <progress min="0 " value="0" max="100" id="firstProgressBar"></progress>
  <span class="firstProgress">0%</span>
</form>