js的循环

循环

循环语句就是能够重复执行相同操作的语句，当我们需要重复执行某些代码或连续执行的代码有数字在变化时，就可以使用循环。下面介绍一下for语句。

语法：

for (语句 1; 语句 2; 语句 3)
  {
  被执行的代码块
  }

注意：多个for可以都用变量i，但是循环嵌套要换变量名（把i换成j）。

下面是一些循环的例子。

练习1：50个li每个li向下和右移动一格。

body{margin:0}
li{width:50px;height:50px;background-color:red;position:absolute;left:0;top:0;}
ul{margin:0;padding:0;list-style:none}

<ul></ul>
<script>
var str="";
var oUl=document.getElementsByTagName("ul")[0];
for(var i=0;i<50;i++){
	str+="<li></li>"	
}
oUl.innerHTML=str;
var aLi=document.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++){
	aLi[i].style.left=50*i+"px";
	aLi[i].style.top=50*i+"px";
}
</script>

这个就是利用定位li的left值与top值，然后再用for循环遍历，生成50个li。主要就是按规律计算出每个li相对应的left值和top值。

练习2：50个li每10个li就换一行。

body{margin:0;}
ul{margin:0; padding:0; list-style:none; position:relative;}
li{width:50px; height:50px; background-color:#3FC; position:absolute;}

<ul id="ul1"></ul>
<script>
var oUl = document.getElementById("ul1");
var str = "";
for(var i=0;i<50;i++){
	str += "<li></li>";
}
oUl.innerHTML = str;
var aLi = oUl.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++){
	aLi[i].style.top = parseInt(i/10)*51+"px";
	aLi[i].style.left = (i%10)*51+"px";
}
</script>

先遍历50个li元素，然后根据题意，每十个一行，就可以知道每一行的top值一样，每一列的left的值都一样。parseInt()取整的方法，%取余的方法。

练习3：用11个li做一个V字形。

body{margin:0}
li{width:50px;height:50px;background-color:pink;position:absolute;left:0;top:0;}
ul{margin:0;padding:0;list-style:none}

<ul></ul>
<script>
var str="";
var oUl=document.getElementsByTagName("ul")[0];
for(var i=0;i<11;i++){
	str+="<li></li>"	
}
oUl.innerHTML=str;
var aLi=document.getElementsByTagName("li");
for(var i=0;i<aLi.length;i++){
	if(i<6){
		aLi[i].style.top=50*i+"px";
	}
	else{
		aLi[i].style.top=500-(50*i)+"px";
	}
		aLi[i].style.left=50*i+"px";

}
</script>