js怎么实现进度条！-你问我答-推扬网

js怎么实现进度条！

admin

2020/07/13 17:52:13

lt318025的回答

就是要用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循环在很短的时间内执行完毕你根本看不出来

}
}

Baby_原來的回答

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