【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             }

以上就是JS中循环嵌套常见的六大经典例题和六大图形题，你掌握了么？

转载于:https://www.cnblogs.com/hope666/p/6681346.html

【JS中循环嵌套常见的六大经典例题+六大图形题，你知道哪几个？】相关推荐

ajax如何循环lis,关于js中循环遍历中顺序执行多个嵌套ajax的问题
就是业务上需要完成一个功能,这个功能需要依次调用四个接口,后面接口的参数都依赖于前一个接口的返回值. 类似这样: var objArr = "从其他逻辑获得"; for(var n ...
c语言微课ppt嵌套函数,C语言课程中循环嵌套的微课教学设计与思考
C语言课程中循环嵌套的微课教学设计与思考 2018-12-01 话题:教育学习,教学方法摘要本文以C语言课程中循环嵌套内容为例,通过观看全国高校微课比赛获奖作品与专家点评得到启示,本科与高职的微 ...
小白必看！JS中循环语句大集合
摘要:JavaScript中,一共给开发者提供了一下几种循环语句,分别是while循环,do-while循环,for循环,for Each,for-in循环和for-of循环. 本文分享自华为云社区& ...
c语言微课ppt嵌套函数,C语言课程中循环嵌套的微课教学设计与思考.pdf
课程教学 Cur r i cul um Teac hi ng C语言课程中循环嵌套的微课教学设计与思考陈磊魏林 ( 江西经济管理干部学院江西 ·南昌330088) ...
js中一种常见条件判断if(var)的坑
在处理js代码判断真假时经常会这么写. //从某个地方获取的值. var vale = fun(......... );if(!value){进入这里表示value的布尔值为false } 我们知道, ...
JS中循环遍历数组的几种常用方式总结
第一种:for循环,也是最常见的最简单的一种,也是使用频率最高的一种,虽然性能不弱,但仍有优化空间 const arr = [11, 22, 33, 44, 55, 66, 77, 88]; for ...
JS中8个常见的陷阱
译者按: 漫漫编程路,总有一些坑让你泪流满面. 原文: Who said javascript was easy ? 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原 ...
java三目运算符嵌套_替代JS中的嵌套三元运算符
您的替代方案基本上是: 你不想做那个 if / else A switch 与 if / else 合并我试图提出一个合理的查找映射选项,但它很快就变得不合理了 . 我会去#1,它不是那么大: i ...
JS–for循环嵌套
循环产生5个*,打印成一行***** //声明变量,初始化为空字符串,用于拼接每次产生的*号 for(var i=1,str='';i<=5;i++){ //每次循环,需要往str中拼接一个*号 ...

【JS中循环嵌套常见的六大经典例题+六大图形题，你知道哪几个？】

【JS中循环嵌套常见的六大经典例题+六大图形题，你知道哪几个？】相关推荐

最新文章

热门文章