新人 新问题

<style type="text/css">
 #f{
 height:10px; border:1px solid;
 background-color:blue;
 }
 </style>
 </head> <body>
  
  <div id="f"></div>
  <script>
 var w=parseInt(document.getElementById("f").style.width);  while(w<50)   {
  w++;
  
  } ;
  
  </script>
 </body>
</html>

解决方案 »

  1.   


    <html>
    <head>
    <style type="text/css">
     #f{
       height:10px;
       border:1px solid;
       background-color:blue;
     }
    </style>
    <script>
    window.onload=function(){
      var w=0;
      while(w<5500){
        w++;
        document.getElementById("f").style.width=w+'px';  
      }  
    }
    </script>
    </head>
    <body>  
      <div id="f"></div>
     </body>
    </html>
      

  2.   

    貌似 宽度的叠加 也是瞬间完成的
    实现不了 进度条一般的 渐进效果。
    难道非要用setTimeout不可？
      

  3.   

    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html"; charset="utf-8"  >
    <title>测试</title>
    <style type="text/css">
    #process{
        height: 20px;
    width : 0px;
    border: 1px solid #ccc;
        background-color:#ccc;
    }
     
    #bar{
    width   : 202px;
    overflow: hidden;
    border  : 1px solid blue;
    text-align: center;
    }
     
    #bar span{
    display    : block;
    margin-top : -20px;
    }
    </style>
    </head>
    <body>
     
    <div id="bar">
       <div  id="process"></div>
       <span id="rate"   ></span>
    </div><script>
    var $ = function(id){
    return document.getElementById(id);
    };var totalW = $("bar").offsetWidth;
    var style  = $("process").style;
    var rate   = $("rate");var anima = window.setInterval(function(){
        var width  = parseInt(style.width||0);
    if( width >= totalW ){
    rate.innerHTML = "100%";
    window.clearInterval( anima );
    }else{
    var newWidth    = width+5;
    style.width     = newWidth + "px";
    rate.innerHTML  = Math.floor(newWidth/totalW*100) + "%" ;
    }
    }, 100);
      
    </script>
    </body>
    </html>
      

  4.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML> <HEAD>  <TITLE> New Document </TITLE>  <META NAME="Generator" CONTENT="EditPlus">  <META NAME="Author" CONTENT="">  <META NAME="Keywords" CONTENT="">  <META NAME="Description" CONTENT="">  <style type="text/css">
      *{
      padding: 0;
      margin:0;
      }  #main{
      margin: 30px;
     width: 300px;
     height: 10px;
     border: 1px solid red;
      }
     #son{
     width: 0;
     height: 10px;
     background-color: pink;
     }  </style>   <script type="text/javascript">
    var i=1;
      /*function test(){
      f();
    }//*/
        function f(){
            var  code = document.getElementById("son").style.width=i+"px";
            i++;
            if(i<=300) {
    t=setTimeout("f()",50);//这里改变速度.
    }
        }  </script> </HEAD>  <BODY>  <div id="main">
    <div id="son">
    </div>
    </div>
    <input type="button" value="start" onclick="f()"/> </BODY></HTML>