这个想法是要有一个进度条，它会在20秒内从0％加载到100％，然后从0开始重新加载。要实现这一点，我需要setInterval结合使用jQuery.css('width', '+=0.1%)。
一个时间间隔为20秒，另一个时间间隔为每20毫秒将div宽度增加0.1％。第一次启动时应该达到100％，对吗？
但事实并非如此。首先，宽度未按预期添加：不是以0.1％的步长计算蜂鸣次数，而是在逗号后面放置更多位置。其次，这20秒在达到100％之前已经很长时间了。不同的浏览器在这里给出不同的结果。在重新开始之前，Chrome接近100％，而在我的网站中达到70％时，Firefox已经过了20秒...
即使使用1％的步长而不是0.1％的步长，它仍然不能正确地累加，尽管应该没有任何地方，但我仍然在逗号后面找到位置。
示例代码：
var interval;
$('.progressbar').css('width', '0%');
interval= setInterval(function() {
$('.progressbar').css('width', '+=0.1%');
}, 20);
setInterval(startLoading, 20000);
function startLoading() {
clearInterval(interval);
$('.progressbar').css('width', '0%');
interval= setInterval(function() {
$('.progressbar').css('width', '+=0.1%');
}, 20);
}.progressbar{
height: 10px;
background: #0060ff;
border-radius:20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="progressbar"></div>使用CSS动画或jquery .animate()。
您只需要将持续时间设置为20000，一切都会正常运行。如果您必须在某个时候停止它，只需progressBarLoop在动画回调中在函数周围添加一个条件。（我将持续时间设置为5000，因此我们不必等待20秒即可重新启动）
var stop = false;
function progressBarLoop() {
$('.progressbar').css('width', '0%');
$('.progressbar').animate({
width:'100%'
}, 5000, 'linear', function() {
if(!stop) {
progressBarLoop();
}
});
}
progressBarLoop();.progressbar{
height: 10px;
background: #0060ff;
border-radius:20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="progressbar"></div>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句