我正在学习bootstrap 4,并且看到进度条。所以,尽管我使用javascript使它更具迭代性。但是,我的进度条不起作用。我想将进度条上移至100%,就像我们看到正常的进度条从0%移到100%一样。我试过了 :
var count=0;
var x=document.querySelector('.progress-bar');
window.onload=callMe();
;
function callMe(){
x.style.width=null;
setInterval(function(){
increaseBar();
},1000);
}
function increaseBar(){
count=count+10;
console.log(count);
console.dir(x);
x.style.width=count;
x.innerHTML=count;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Progress Bar With Label</h2>
<div class="progress">
<div class="progress-bar" style="width:0%">0%</div>
</div>
</div>
</body>
<script>
</script>
</html>
我看到x.style.width = count; 不起作用,我也尝试使用x.setAttribute(“ style,” width“),但它也没有起作用。
您应使用with的百分比,并在达到100的百分比时清除interwal
var count=0;var myVar;
var x=document.querySelector('.progress-bar');
window.onload=callMe();
;
function callMe(){
x.style.width=null;
myVar=setInterval(function(){
increaseBar();
},1000);
}
function increaseBar(){
if(count==100){clearInterval(myVar);return}
count=count+10;
x.style.width=count+"%";
x.innerHTML=count+"%";
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Progress Bar With Label</h2>
<div class="progress">
<div class="progress-bar" style="width:0%">0%</div>
</div>
</div>
</body>
<script>
</script>
</html>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句