for循环

什么时候会用到循环呢？

1）重复执行某些代码

2）每次执行的时候有一个数不停的变化

例：for循环的执行顺序

for(var i=0;i<5;i++){
    alert(i);  //0 1 2 3 4
    //for循环的执行顺序：
    /* 1)var i=0;
     * 2)i<5
     * 3){}里面的代码
     * 4)i++
     */
}
alert(i);  //5  这时候已经出了循环体了，这时候它不会再去执行{}里面的代码

例：在for循环中有需要判断数组长度的，例如下面这个例子中aLi.length，我们可以先定义一个变量来承载aLi.length，如下的var len=aLi.length；这样可以避免for循环每次都计算aLi.length的长度而消耗性能。

<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

window.onload=function (){
    var oUl=document.getElementById("list");  //当获取一个元素的时候我们可以给定义的变量前面加上o，其实就是objectUl然后简写为oUl
    var aLi=oUl.getElementsByTagName("li");  //当获取一个元素的集合的时候，我们可以在定义的变量前加上a，其实是arrayLi简写为aLi
    var arr=['今天','明天','后天','今后','未来'];
    for(var i=0;i<aLi.length;i++){
        aLi[i].innerHTML=arr[i];
    }
};

在上述for循环中aLi.length会耗一定性能，因为它每次都需要计算一下aLi.length的长度是多少，我们可以换一种方式：

window.onload=function (){
    var oUl=document.getElementById("list");  //当获取一个元素的时候我们可以给定义的变量前面加上o，其实就是objectUl然后简写为oUl
    var aLi=oUl.getElementsByTagName("li");  //当获取一个元素的集合的时候，我们可以在定义的变量前加上a，其实是arrayLi简写为aLi
    var arr=['今天','明天','后天','今后','未来'];
    var len=aLi.length;   //先定义一个变量来承载aLi.length  这样在for循环的时候就不用每次都计算它的长度了
    for(var i=0;i<len;i++){
        aLi[i].innerHTML=arr[i];
    }
};

例：当使用document.body.innerHTML的时候别把它放到for循环体里面，这样会消耗性能

window.onload=function (){
    var aBtn=document.getElementsByTagName("input");
    for(var i=0;i<3000;i++){  //性能有问题，需要加载很长时间  for循环本身没问题
        document.body.innerHTML+="<input type='button' value='按钮' />";  //这句代码耗性能
    } //需要很长时间才能将3000个按钮加载出来
};

//可以直接使用document.title="";给title设置内容
//但是对body操作的时候不能直接使用document.body给body设置内容，需要使用document.body.innerHTML给body设置内容
//document.title=123;
//document.body.innerHTML="abc";

//document.body.innerHTML+="<input type='button' value='按钮' />";
//这句代码非常耗性能，因为当i<3000的时候每次都会来执行它，然后它每次都到body中去找东西放东西，非常耗时间，可以换一种方式

可以换一种方式：

var aBtn=document.getElementsByTagName("input");
var str="";
for(var i=0;i<3000;i++){
    str+="<input type='button' value='按钮' />";
}
document.body.innerHTML=str;  //这样它就只会往body里面放一次，节省了很多时间

例：

var oUl=document.getElementById("list");
var aLi=oUl.getElementsByTagName("li");
var len=aLi.length;
for(var i=0;i<len;i++){
    aLi[i].onclick=function (){
        alert(i)；  //弹出的不是0 1 2 3 4  而是5
    }  
}

//html
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

for循环计算坐标：css部分：

div{
    width:50px;
    height:50px;
    background:#ff0000;
    color:#fff;
    font-size:30px;
    text-align:center;
    line-height:50px;
    position:absolute;
    top:0;
    left:0;
}

例：动态生成10个div，并按顺序排列

window.onload=function (){
    var aDiv=document.getElementsByTagName("div");
    var str="";
    for(var i=0;i<10;i++){
        str+="<div>"+(i+1)+"</div>";
    }
    document.body.innerHTML=str;
    for(var i=0;i<aDiv.length;i++){
        aDiv[i].style.left=i*50+"px";
    }
};

如果想要每个div之间有个间隔，并且让第一个div距离左边10px边距：

window.onload=function (){
    var aDiv=document.getElementsByTagName("div");
    var str="";
    for(var i=0;i<10;i++){
        str+="<div>"+(i+1)+"</div>";
    }
    document.body.innerHTML=str;
    for(var i=0;i<aDiv.length;i++){
        aDiv[i].style.left=10+i*60+"px";
    }
};

 如果想要其成为斜线的样子，只需要加上一句：aDiv[i].style.top=10+i*60+"px";即可：

例：动态生成11div，让其从第六个div开始反转变成V字：

var aDiv = document.getElementsByTagName("div");
var str = "";
for(var i = 0; i < 11; i++) {
    str += "<div>"+(i+1)+"</div>";
}
document.body.innerHTML = str;
var j = 0;
for(var i=0;i<aDiv.length;i++){
    if(i > aDiv.length /2){
        aDiv[i].style.left = i * 50 +'px'; 
        j = j + 2;
        aDiv[i].style.top = i * 50 - j * 50 +'px';
    }else{
        aDiv[i].style.left = i*50 +'px'; 
        aDiv[i].style.top = i*50 +'px';
    }
}

javascript动态生成100个div，每逢10就换一行：

思路：把100个div从1开始编号（即1-100），假定编号的变量为i，则

第i个div的Left = (i%10) * div的width；

第i个div的Top = parseInt(i/10) * div的height；
简言之就是每个div的左边距等于这个div的序号除以10的余数再乘以这个div的宽；每个div的上边距等于这个div的序号除以10的商再乘以这个div的高。

var aDiv = document.getElementsByTagName("div");
var str = "";
for(var i = 0; i < 100; i++) {
    str += "<div>"+(i+1)+"</div>";
}
document.body.innerHTML = str;
for(var i=0;i<aDiv.length;i++){
          aDiv[i].style.left=(i%10)*60+"px";
   aDiv[i].style.top=parseInt(i/10)*60+"px";
}