首先，了解一下循環嵌套的特點：外層循環轉一次，內層循環轉一圈。
在上一篇隨筆中詳細介紹了JS中的分支結構和循環結構，我們來簡單的回顧一下For循環結構：
1、for循環有三個表達式，分別為：
①定義循環變量
② 判斷循環條件
③更新循環變量（三個表達式之間，用;分隔。）
for循環三個表達式可以省略，兩個;缺一不可
2、for循環特點：先判斷，再執行；
3、for循環三個表達式，均可以有多部分組成，之間用逗號分隔，但是第二部分判斷條件需要用&&鏈接，最終結果需要為真/假。
【嵌套循環特點】
外層循環控制行數，內層循環控制每行元素個數
[做圖形題思路]（圖形題請看案例三）
1、確定圖形一共幾行，即為外層的循環的次數；
2、確定每行有幾種元素，代表有幾個內層循環；
3、確定沒種元素的個數，即為每個內層循環的次數；
Tips：通常，找出每種元素個數，與行號的關系式，即為當前內層循環的最大值（從1開始循環）
例題如下：
案例一：
求和，實現 1+（1+2）+（1+2+3）+（1+2+3+4）+（1+2+3+4+5）=35
代碼如下：
1 var sum=0,sumRow=0; 2 for (var i=1;i<=5;i++){ 3 sumRow=0; 4
5 if(i!=1) document.write("("); 6
7 for (var j=1;j<=i;j++) { 8 if (j!=i) document.write(j+"+"); 9 else document.write(j); 10 sumRow += j; 11 } 12 if (i==1) document.write("+"); 13 else if(i==5) document.write(")="); 14 else document.write(")+"); 15
16 sum += sumRow; 17 } 18 document.write(sum);
案例二：
求和：實現1!+2!+3!+4!+5!
分析
1+
1*2+
1*2*3+
1*2*3*4+
1*2*3*4*5=
代碼如下：
1 var sum=0; 2 for (var i=1;i<=5;i++){ 3 var jie=1; 4 for (var j=1;j<=i;j++){ 5 jie *= j; 6 } 7 sum += jie; 8 } 9 document.write("1!+2!+3!+4!+5!="+sum);
案例三：（六大圖形題）
1、矩形
代碼如下：
1 for(var i=1;i<=5;i++){ 2 for(var j=1;j<=5;j++){ 3 document.write("*"); 4 } 5 document.write("<br />"); 6 } 7
8 document.write("<hr />");
實現效果：
2、直角三角形
代碼如下：
1 for(var i=1;i<=5;i++){ 2 for(var j=1;j<=i;j++){ 3 document.write("*"); 4 } 5 document.write("<br />"); 6 } 7
8 document.write("<hr />");
實現效果：
3、平行四邊形
代碼如下：
1 for(var i=1;i<=5;i++){ 2 for(var j=1;j<=i+4;j++){ 3 if(j<i)document.write(" "); 4 else{document.write("*");} 5 } 6 document.write("<br />"); 7 } 8
9 document.write("<hr />");
實現效果：
4、菱形
代碼如下：
1 for (var i=1;i<=4;i++){ 2 for(var j=1;j<=4-i;j++){ 3 document.write(" "); 4 } 5 for(var k=1;k<=2*i-1;k++){ 6 document.write("*"); 7 } 8 document.write("<br />"); 9 } 10 for (var i=1;i<=3;i++){ 11 for(var j=1;j<=i;j++){ 12 document.write(" "); 13 } 14 for(var k=1;k<=7-2*i;k++){ 15 document.write("*"); 16 } 17 document.write("<br />"); 18 } 19
20 document.write("<hr />");
實現效果：
5、數字等邊三角形
代碼如下：
1 for(var i=1;i<=4;i++){ 2 // 空格
3 for(var k=1;k<=4-i;k++){ 4 document.write("<span style='display: inline-block;width: 8px;'></span>"); 5 } 6 var n = 1; 7 // 遞增
8 for(var j=1;j<=i;j++){ 9 document.write(n); 10 n++; 11 } 12 n-=2; 13 // 遞減
14 for(var m=1;m<=i-1;m++){ 15 document.write(n); 16 n--; 17 } 18 // 回車
19 document.write("<br/>"); 20 } 21
22 document.write("<hr />");
實現效果：
6 、九九乘法表（以table表格的形式打印）
代碼如下：
1 document.write("<table width='700'>") 2 for(var i=1;i<=9;i++){ 3 document.write("<tr>") 4 for(var j=1;j<=i;j++){ 5 document.write("<td>"+i+"*"+j+"="+i*j+"</td>"); 6 } 7 document.write("</tr>") 8 } 9 document.write("</table>") 10
11
12
13 document.write("<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />");
實現效果：
案例四：
輸入一個數字，然后判斷是否為正整數，如果不是，提示重新輸入；
如果是，將該數字左右反轉，然后輸出（例如：12345，翻轉之后為54321）
代碼如下：
1 var sum=1;
for(var i=1;i<=2;){
var num = prompt("請輸入一個數字~");
if(Number(num)>0&&parseInt(num)==parseFloat(num)){
break;
}
}
/*
num = 12345
5 num%10;
4 num/10%10;
3 num/10/10%10;
……
*/
document.write("您輸入的數字為："+num+"<br />");
for(j=1;;j++){
sum *= 10;
var fz = parseInt(num%sum/(sum/10));
document.write(fz);
if(num-sum<=0){
break;
}
}
實現效果：
案例五：
編寫一個程序，最多接受10個數字，並求出其中所有正數的和。
用戶可通過輸入999終止程序，統計出用戶輸入的正數個數，並顯示這些正數的和。
分析：
①輸入非數值，不占用10次機會之一，但要求重新輸入；
②輸入的是數值，只累加整數；
判斷是否為一個數字：Number（num）不為NaN，說明為數字
判斷一個數字為正數：Number(num)>0
判斷一個數字為整數：parseInt(num)==parseFloat(num);
代碼如下：
1 var i=1,sum=0,n=0; 2 while(i<=3){ 3 var num = prompt("請您輸入一個數，我會為您計算出所有正數的和~"); 4 if(Number(num)){ 5 if(num==999){ 6 break; 7 } 8 else if(num>=0){ 9 sum = sum + parseFloat(num); 10 i++; 11 n++; 12 } 13 else if(num<0){ 14 i++; 15 } 16 } 17 } 18 document.write("您一共輸入"+n+"個正整數"+"<br />它們的和為："+sum);
案例六：
輸入某年某月某日，判斷這一天是這一年的第幾天？
代碼如下：
方法一：
1 for(var i=1;i<month;i++){ 2 if(i==1||i==3||i==5||i==7||i==8||i==10||i==12){ 3 sum += 31; 4 }else if(i==4||i==6||i==9||i==11){ 5 sum += 30; 6 }else if(i==28){ 7 sum += 28; 8 } 9 } 10 if((year%4==0&&year%100!=0||year%400==0)&&month>2){ 11 sum += (day+1); 12 }else{ 13 sum += day; 14 } 15 document.write("您輸入的日期為"+year+"-"+month+"-"+day+"<br />為該年的第"+sum+"天");
方法二：
1 var year = parseInt(prompt("請輸入年份：")); 2 var month = parseInt(prompt("請輸入月份：")); 3 var day = parseInt(prompt("請輸入日期：")); 4
5 /*假設都是平年，2月28天*/
6 var sum = 0; 7 switch(month-1){ 8 case 12: 9 sum += 31; 10 case 11: 11 sum += 30; 12 case 10: 13 sum += 31; 14 case 9: 15 sum += 30; 16 case 8: 17 sum += 31; 18 case 7: 19 sum += 31; 20 case 6: 21 sum += 30; 22 case 5: 23 sum += 31; 24 case 4: 25 sum += 30; 26 case 3: 27 sum += 31; 28 case 2: 29 sum += 28; 30 case 1: 31 sum += 31; 32 } 33 if((year%4==0&&year%100!=0||year%400==0)&&month>2){ 34 sum += (day+1); 35 }else{ 36 sum += day; 37 } 38 document.write("您輸入的日期為"+year+"-"+month+"-"+day+"<br />為該年的第"+sum+"天");
案例七：
假設一個簡單的ATM機的取款過程是這樣的：首先提示用戶輸入密碼（password），
最多只能輸入三次，超過3次則提示用戶“密碼錯誤，請取卡”結束交易。如果用戶密碼正確，
再提示用戶輸入取款金額（amount），ATM機只能輸出100元的紙幣，一次取錢數要求最低
100元，最高1000元。若用戶輸入的金額符合上述要求，則打印輸出用戶取得錢數，
最后提示用戶“交易完成，請取卡”，否則提示用戶重新輸入金額。
假設用戶密碼是111111，請編程實現。
代碼如下：
1 var isTrue = false, 2 n = 1; 3
4 while(n <= 3) { 5 var pwd = prompt("請輸入用戶密碼~"); 6 if(pwd == 111111) { 7 isTrue = true; 8 break; 9 } else { 10 n++; 11 if(n > 3) { 12 document.write("密碼錯誤，請取卡!"); 13 } 14 } 15 } 16
17 if(isTrue) { 18 while(1) { 19 var num = prompt("請輸入取款金額：(100~1000元)") 20 if(num % 100 == 0 && num >= 0 && num <= 1000) { 21 document.write("您的取款金額為" + num + "元~<br />交易完成，請取卡！"); 22 break; 23 } else { 24 alert("你輸入不合法！請重新輸入！") 25 } 26 } 27 //循環輸入金額操作
28 }
以上就是JS中循環嵌套常見的六大經典例題和六大圖形題，你掌握了么？