本文知识点（目录）：
1、while循环语句
2、do...while循环语句
3、for循环语句
4、for...in循环语句
5、附录1（with语句）
6、附录2（打印多边形及乘法表）
1、while循环语句
格式:
while(判断条件){
循环体内容代码;
}
1.1、实例
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>while循环练习</title> 6 </head> 7 <script type="text/javascript"> 8 /* 9 循环语句:while循环 10 格式: 11 while(判断条件){ 12 循环体内容代码; 13 } 14 */ 15 //打印5次helloWorld 16 var a=0; 17 while(a<5){ 18 document.write("helloWorld</br>"); 19 a++; 20 } 21 //需求计算1-100的总和 22 var num=1; 23 var sum=0; 24 while(num<=100){ 25 sum+=num; 26 num++; 27 } 28 document.write(sum+"</br>"); 29 </script> 30 <body> 31 </body> 32 </html>
实例结果图
2、do...while循环语句
格式：
do{
循环体内容代码;
}while(判断条件)
2.1、实例
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 <script type="text/javascript"> 8 /* 9 循环语句:do...while循环 10 格式： 11 do{ 12 循环体内容代码; 13 }while(判断条件); 14 */ 15 16 //需求计算1-100种中奇数的和 17 var b=1; 18 var sum=0; 19 do{ 20 if(b%2!=0){ 21 sum+=b; 22 } 23 b++; 24 }while(b<=100); 25 document.write(sum+"</br>"); 26 27 </script> 28 <body> 29 </body> 30 </html>
实例结果图
3、for循环语句
格式:
for(初始化语句;判断条件;循环后的语句){
循环语句代码;
}
3.1、实例
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>for循环练习</title> 6 </head> 7 <script type="text/javascript"> 8 /* 9 循环语句：for循环 10 格式: 11 for(初始化语句;判断条件;循环后的语句){ 12 循环语句代码; 13 } 14 */ 15 16 //计算1-100的偶数和 17 var sum=0; 18 for(var c=1;c<=100;c++){ 19 if(c%2==0){ 20 sum+=c; 21 } 22 } 23 document.write(sum); 24 </script> 25 <body> 26 </body> 27 </html>
实例结果图
4、for...in循环语句
格式:
for(var 变量名 in 要遍历的目标变量名){
}
4.1、for...in语句的作用
1.可以用于遍历数组的元素。 注意：使用for-in语句遍历数组元素时遍历出的是数组下标
2.可以用于遍历对象的所有属性。 注意：使用for-in遍历对象属性的时候，遍历出来的是属性名
4.2、实例
<!doctype html> <html> <head> <meta charset="utf-8"> <title>for...in语句练习</title> </head> <script type="text/javascript"> //for-in语句遍历数组 var arr=[12,17,13,19,20]; for(var a in arr){ document.write(arr[a]+" ");//返回值：12 17 13 19 20 这里，如果直接输出a,得到的是该数组的下标值 } document.write("<br/>");//换行 //for-in语句遍历对象的属性值 function person(id,name){ this.id=id; this.name=name; } var p=new person(110,"张三"); for(var a in p){ document.write(p[a]+" ");//返回值：110 张三 这里，如果直接输出a,得到的是该对象的属性名 } </script> <body> </body> </html>
实例结果图
附录1
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 <script type="text/javascript"> 8 /* 9 with语句：有了with语句,在存储对象属性和调用方法时候不用重复指定对象了 10 11 格式： 12 with(对象){ 13 14 } 15 */ 16 with(document){ 17 for(var i=0;i<5;i++){ 18 for(var j=0;j<5;j++){ 19 write("* ");//这里本来要写document.write()才能把值打印出到页面上，要想不重复写document，就在with()括号中写上document 20 } 21 write("</br>"); 22 } 23 } 24 25 26 function person(id,name){ 27 this.id=id; 28 this.name=name; 29 } 30 document.write("<hr/>"); 31 var p=new person(110,"狗娃"); 32 with(p){ 33 document.write(id+" "+name);//这里本来要p.id和p.name才能获取到值的，要想不重复写p，则在with()括号中写上p即可，然后用大括号括起来 34 } 35 36 </script> 37 <body> 38 </body> 39 </html>
附录2
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 </head> 7 <script type="text/javascript"> 8 //需求1：打印出"*"的正方形,5行5列 9 for(var i=0;i<5;i++){ 10 for(var j=0;j<5;j++){ 11 document.write("* "); 12 } 13 document.write("<br/>"); 14 } 15 16 document.write("<hr/>");//水平线 17 //需求2：打印出一个正直角三角形,5行5列 18 for(var i=0;i<5;i++){ 19 for(var j=0;j<=i;j++){ 20 document.write("* "); 21 } 22 document.write("<br/>"); 23 } 24 25 document.write("<hr/>");//水平线 26 //需求3：打印出一个倒直角三角形,5行5列 27 for(var i=0;i<5;i++){ 28 for(var j=4;j>=i;j--){ 29 document.write("* "); 30 } 31 document.write("<br/>"); 32 } 33 34 document.write("<hr/>");//水平线 35 //需求4：打印出一个九九乘法表 36 for(var i=1;i<10;i++){ 37 for(var j=1;j<=i;j++){ 38 document.write(j+"*"+i+"="+(i*j)+" "); 39 } 40 document.write("<br/>"); 41 } 42 </script> 43 <body> 44 </body> 45 </html>
附录2结果图
|
原创作者：DSHORE 作者主页：http://www.cnblogs.com/dshore123/ 原文出自：https://www.cnblogs.com/dshore123/p/9416306.html 欢迎转载，转载务必说明出处。（如果本文对您有帮助，可以点击一下右下角的 推荐，或评论，谢谢！） |