JS循環+循環嵌套+經典例題+圖形題


首先,了解一下循環嵌套的特點:外層循環轉一次,內層循環轉一圈。

在上一篇隨筆中詳細介紹了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("&nbsp;");
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("&nbsp;");
 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("&nbsp;");
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             }
復制代碼
其它鏈接:
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM