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>

jQuery进度条动画

1 个答案: