javascript - JQuery 进度条动画

Question

尝试使用 jquery 和 javascript 显示进度条，但未显示。

var show_time = Math.floor(Math.random() * 10000) + 5000;

setTimeout(function() {
  $("#progress").hide()
}, show_time);

var myCountdown = $('#progress').progressBarTimer({
  autostart: true, // default false
  timeLimit: show_time,
  baseStyle: 'bg-info',
  completeStyle: 'bg-success',
  animated: true,
  striped: true,
  label: {
    show: true,
    type: 'percent'
  }
});

<!-- Stylesheet -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<br /><br /><br />
<div id="progress"></div>

<script src="https://www.jqueryscript.net/demo/Countdown-Timers-Bootstrap-4-Progressbar/jquery.progressBarTimer.js"></script>

它只显示栏，里面什么也没有发生。

Answer 1

由于属性命名错误:

autostart

重命名为:

autoStart

否则，您必须使用start 手动启动进度条:

$("#countdown").progressBarTimer({
  timeLimit: 60,
  warningThreshold: 5,
  autoStart: false,
  onFinish  : function () { console.log('completed') }
}).start()

尽管根据有关如何设置此进度条的文档，它也应该通过使用 outstart 来工作，但您可以查看 here此属性应命名为 autoStart。

请注意，有一个 onFinish 回调可用于在进度条完成后执行某些操作，因此请使用此属性而不是独立的 setTimeout 来隐藏之后的进度条。 timeLimit 需要一个以秒为单位的值，而不是以毫秒为单位。为了让您的用户不要等待太久，这个操作可能更适合您:

Math.floor(Math.random() * 10) + 5;

这个例子说明了我的意思:

var show_time = Math.floor(Math.random() * 10) + 5;

var myCountdown = $('#progress').progressBarTimer({
  autoStart: true, // default false
  timeLimit: show_time,
  baseStyle: 'bg-info',
  completeStyle: 'bg-success',
  animated: true,
  striped: true,
  onFinish  : function () { 
      setTimeout(function() {
          $("#progress").hide()
      }, 1000);
  },
  label: {
    show: true,
    type: 'percent'
  }
});

<!-- Stylesheet -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<!-- JavaScript -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div id="progress"></div>

<script src="https://www.jqueryscript.net/demo/Countdown-Timers-Bootstrap-4-Progressbar/jquery.progressBarTimer.js"></script>