尝试使用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>
它只显示栏,没有发生任何事情。
最佳答案
由于错误的命名属性:
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>
关于javascript - JQuery 进度条动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55926001/