js进度条怎么写啊?

2020-11-13 21:27发布

请问一下,js进度条怎么写啊?在线等!!!
2条回答
尤靖茹
1楼-- · 2020-11-13 21:33
就是要用setInterval setTimeout
慢慢的改变div的宽,好像一点一点涨到100%

for(var i=0;i<100;i++)
{
for(var j=0;j<10000;j++)
{
var width = $("#progressBar").width();
width+=1;
$("#progressBar").width(width);
//这样不行 是因为for循环在很短的时间内执行完毕你根本看不出来

}
}
王婉中
2楼-- · 2020-11-13 21:43

<!DOCTYPE">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>进度条</title>
<styletype="text/CSs">
body{
text-align:center;
}
.graph{
width:450px;
border:1pxsolid#F8B3D0;
height:25px;
}
#bar{
display:block;
background:#FFE7F4;
float:left;
height:100%;
text-align:center;
}
#barNum{
position:absolute;
}
</style>
<scripttype="text/javascript">
function$(obj){//封装方法,相当于jQuery
returndocument.getElementById(obj);
}
functiongo(){
$("bar").style.width=parseInt($("bar").style.width)+1+"%";
$("bar").innerHTML=$("bar").style.width;
if($("bar").style.width=="100%"){
window.clearInterval(bar);//进度为100时清除定时器
}
}
varbar=window.setInterval("go()",50);//设置定时器
window.onload=function(){
bar;
}
</script>
</head>
<body>
<divclass="graph">
<strongid="bar"style="width:1%;"></strong>
</div>
</body>
</html>

一周热门 更多>