for循环

Posted on

for 循环是您在希望创建循环时常会用到的工具。

下面是 for 循环的语法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
for (语句 1; 语句 2; 语句 3){
  	被执行的代码块     
 }
  
语句 1 在循环（代码块）开始前执行
通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。
语句 1 是可选的，也就是说不使用语句 1 也可以。
您可以在语句 1 中初始化任意（或者多个）值。

语句 2 定义运行循环（代码块）的条件
通常语句 2 用于评估初始变量的条件。
语句 2 同样是可选的。
如果语句 2 返回 true，则循环再次开始，如果返回 false，则循环将结束。
提示：如果您省略了语句 2，那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。请在本教程稍后的章节阅读有关 break 的内容。

语句 3 在循环（代码块）已被执行之后执行
通常语句 3 会增加初始变量的值。
语句 3 也是可选的。
语句 3 有多种用法。增量可以是负数 (i--)，或者更大 (i=i+15)。
语句 3 也可以省略

栗子来啦：

1
2
3
4
5
6
window.onload = function (){
	for (var i = 0; i<= 9; i++) {
		alert("我是 "+ i);
	}
	alert('你都玩晒啦！');
}

1加到一百的例子+解析：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
window.onload = function (){
	var sum = 0;
	var str = '';
	for(var i =1 ; i <= 100 ; i++){
		sum += i ;
		i==100?str += i + "=":str += i + "+";
	}
	alert(str+sum);
	//var p = document.getElementsByTagName('p')[0];
	//p.innerHTML = str + sum;
	//1+2+3+4+......+100=
	//var sum = 0;
	//sum +=i; ----sum = sum + 1;
	//sum = 0 + 1;----------sum = 1;
	//sum = sum + 2;-------sum = 1 + 2;----------sum = 3;
	//sum = sum + 3;-------sum = 3 + 3;----------sum = 6;
	//sum = sum + 4;-------sum = 6 + 4;----------sum = 10;
	//sum = sum + 5;-------sum = 10 + 15;--------sum = 25;
	//.......
	//sum = sum + 100;-------sum = 4950 + 100;---sum = 5050;
	//alert(sum);-------alert(5050);
}

再来一颗栗子练练手：1到100里面，如果可以被3整除的sum + 这个数，否则sum + 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
window.onload = function (){
	var sum = 0;
	var str = '';
	for(var i =1 ; i <= 100 ; i++){
		i%3==0?sum += i:sum+=1;
		var a ='';
		i==100?a = "=":a = "+";
		i%3==0?str += i + a:str += 1 + a;
	}
	//alert(str+sum);
	//在console里显示页面看不见，可用于调试、测试，以减少alert带来的卡顿和麻烦
		console.log(str+sum);
	//1到100里面，如果可以被3整除的sum + 这个数，否则sum + 1
	//var sum = 0;
	//i%3==0?sum += i:sum+=1;
	//i=1 1%3=1 sum = sum + 1;-------sum = 0 + 1;----------sum = 1;
	//i=2 2%3=2 sum = sum + 1;-------sum = 1 + 1;----------sum = 2;
	//i=3 3%3=0 sum = sum + 3;-------sum = 2 + 3;----------sum = 5;
	//i=4 4%3=1 sum = sum + 1;-------sum = 6 + 1;----------sum = 7;
	//i=5 5%3=2 sum = sum + 1;-------sum = 7 + 1;--------sum = 8;
	//.......
	//i=100 100%3=1 sum = sum + 1;-----sum = 1749 + 1;---sum = 1750;
	//alert(sum);-------alert(1750);
}

小贴士：

1
2
3
4
5
6
调试的时候可以使用alert，但是在for循环里面会有不断确定的麻烦，这个时候就可以使用console.log（），它在console里显示，页面上是看不见的，可用于调试、测试，以减少alert带来的卡顿和麻烦

Break 语句
它主要用于跳出循环。
break 语句可用于跳出循环。
break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）。

栗子不可少

1
2
3
4
5
6
7
8
9
10
11
window.onload = function (){
	for (var i = 0; i<= 9; i++) {
		if(i>5){
			break;
			//退出当前的这个for循环
		}
		alert("我是 "+ i);
	}
	alert('你都玩晒啦！'+i);
	//有break时i=6    没有break时i=10
}

Continue 语句

1
continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。

栗子不可少

1
2
3
4
5
6
7
8
9
10
11
window.onload = function (){
	for (var i = 0; i<= 9; i++) {
		if(i==5){
			continue;
			//结束本次循环，跳到i++
		}
		alert("我是 "+ i);
		//有continue时输出中没有5,没有continue时输出中有5
	}
	alert('你都玩晒啦！'+i);
}

数组

1
数组对象的作用是：使用单独的变量名来存储一系列的值。

栗子解释下：

1
2
3
4
5
6
7
8
9
10
var arr = ['a','b','c','d','e','f','g'];
alert(arr);
//输出a,b,c,d,e,f,g
alert(arr[2]);
//输出c 数组是从0开始数的，所以2是第三个值
for (var i = 0; i < arr.length; i++) {
//length是数组的长度，也就是值的个数
	alert(arr[i]);
	//每个字母弹一次
}

给列表设置条纹色彩：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
	</ul>
</body>
1
2
3
4
5
6
7
8
9
//	根据TagName获取所有li的数组
var li  = document.getElementsByTagName('li');
	for(var i = 0; i < li.length; i++){
		if(i%2==0){
			li[i].style.background ='red';
		}else{
			li[i].style.background ='yellow';
		}
	}

给列表设置彩色：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
	</ul>
</body>
1
2
3
4
5
6
7
//根据TagName获取所有li的数组
var li  = document.getElementsByTagName(‘li');
//颜色数组
var colorstr = ['red','yellow','blue','green','pink','cornflowerblue','chartreuse','aquamarine','seagreen','plum'];
		for(var i = 0; i < li.length; i++){
			li[i].style.background = colorstr[i];
		}

练习：

1
设置一组checkbox：1.点击全选按钮时全部选中，并修改全选checkbox的状态。2.点击反选按钮时，让checkbox组的checkbox反选，并修改checkbox的状态。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<input type="button" id="all" value="全选" />
		<input type="button" id="no" value="反选" />
		<input type="checkbox" id="all_check"/>
		<ul>
			<li><input name="li" type="checkbox"/></li>
			<li><input name="li" type="checkbox"/></li>
			<li><input name="li" type="checkbox"/></li>
			<li><input name="li" type="checkbox"/></li>
			<li><input name="li" type="checkbox"/></li>
			<li><input name="li" type="checkbox"/></li>
			<li><input name="li" type="checkbox"/></li>
			<li><input name="li" type="checkbox"/></li>
			<li><input name="li" type="checkbox"/></li>
			<li><input name="li" type="checkbox"/></li>
		</ul>
	</body>
	<script type="text/javascript">
	//根据ID获取标签
	//全选按钮
			var all = document.getElementById('all');
	//反选按钮
			var no = document.getElementById('no');
	//全选checkbox
			var all_check = document.getElementById('all_check');
	//列表ul
			var ul = document.getElementById('ul');
	//列表里的所有checkbox
			var li= ul.getElementsByTagName('input');
	//根据name属性获取name为li 的checkbox的组
	//var li= document.getElementsByName('li');
	//全选按钮	的点击事件	
		all.onclick = function (){
	//设置所有name为li 的checkbox选中
			for (var i = 0 ; i < li.length; i++) {
				li[i].checked =true;
			}
	//全选
			all_check.checked = true;
		}
	//反选按钮	的点击事件	
		no.onclick = function (){
			for (var i = 0 ; i < li.length; i++) {
	//设置name为li 的checkbox已选中为未选中,未选中的为选中
				if(li[i].checked != true){
					li[i].checked =true;
				}else{
					li[i].checked = false;
				}
			}
		}
	//全选checkbox 的点击事件
		all_check.onclick = function (){
			for (var i = 0 ; i < li.length; i++) {
				li[i].checked =all_check.checked;
			}
		}
	//判断是否全选
		document.onclick = function(){
			for (var i = 0 ; i < li.length; i++) {
				if(li[i].checked != true) {
	//如果有一个不选中则设置全选checkbox为未选中
					all_check.checked = false;
					break;
				} 
				all_check.checked = true;
			}
		}
	</script>
</html>

练习：点击切换

参考答案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
				background: cornflowerblue;
				font-size: 50px;
				text-align: center;
				line-height: 100px;
				display: none;
			}
			.show{
				display: block;
			}
			.select{
				background: darkorange;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
		//获取四个按钮
				var btn = 	document.getElementsByTagName('input');
//获取四个div
				var div = document.getElementsByTagName('div');
				for (var i=0; i< btn.length;i++) {
					btn[i].index = i ;
				//可以自己定义一个属性，告诉按钮它自己是第几个
					btn[i].onclick=function(){
						//清空样式
						for (var i=0; i< btn.length;i++){							btn[i].className = "";
							div[i].className = "";
						}
						this.className = 'select';
						//this是btn[i]本身
						div[this.index].className = 'show';
					}
				}
			}
		</script>
	</head>
	<body>
		<input class="select" type="button" value="按钮1"/>
		<input type="button" value="按钮2"/>
		<input type="button" value="按钮3"/>
		<input type="button" value="按钮4"/>
		<div class="show">1</div>
		<div>2</div>
		<div>3</div>
		<div>4</div>
	</body>
</html>