JS中的循环嵌套 BOM函数

Posted 2020-09-09 李佳阳

[嵌套循环特点]
            
              外层循环转一次，内层循环转一圈
              外层循环控制行数，内层循环控制每行元素个数
             [做图形题思路]
              1确定图形一共几行  极为外层的循环的次数
             2确定每行有几种元素，代表有几个内层循环。
             3 确定每种元素的个数，即为每个内层循环的次数
                 tips：通常：找出每种元素个数，与行号的关系式，极为当前循环的最大值（从1开始循环）
             
  题目：1+（1+2）+（1+2+3）+(1+2+3+4)+(1+2+3+4+5)=?      
            
         var sum = 0,sumrow=0;
            for(var a =1;a>=1&&a<=5;a++){
               sumrow=0;
                 if(a!=1)document.write("(")
                  for(var b=1;b<=a;b++){
                     if(b<5)document.write(b+"+");
                     else document.write(b);
                      sumrow+=b;
                  }
                  if (a==1)document.write("+");
                 else if(a==5)document.write(")=");
                  else document.write(")+");
                 
                 sum+=sumrow;    
          }

            document.write(sum)

图形题

[长方形]
            
              *****
              *****
              *****
              *****
            
        for(var a=1;a<=5;a++){
            for(var b=1;b<=5;b++){
                document.write(b)
                }
            document.write("<br />");
        }       
[直角三角形]
          *
          **
          ***
          ****
          *****
         for(var a=1;a<=5;a++){
             for(var b=1;b<=a;b++){
                 document.write(b)    
             }
             document.write("<br />");
         }
         
         
         
 [平行四边形]
          *****
           *****
            *****
             *****
              *****
         
         for(var a=1;a<=5;a++){
             for(var c=1;c<=a-1;c++){
                 document.write("&nbsp")
             }
             
            for(var b=1;b<=5;b++){
                document.write(b);
                }
            document.write("<br />")
        }

[菱形]
            *          1     3
           ***         2     2
          *****        3     1
         *******       4     0
          *****       1     5
           ***        2     3
            *         3     1
          
      
         for(var a=1;a<=4; a++){
             for(var c=1;c<=4-a;c++){
                 document.write("<span style=‘display: inline-block;width: 7px;‘></span>")
             }
             for(var b=1;b<=2*a-1;b++){
                 document.write("*")
             }
             document.write("<br />")
         }
         
         
         for(var d=1;d<=3;d++ ){
             for(var f=1;f<=d;f++){
                 document.write("<span style=‘display: inline-block;width: 7px;‘></span>");
             }
             for(var e=1;e<=7-2*d;e++){
                 document.write("*")
             }
             
             document.write("<br />")
         }
         
         
         
[数字等边三角形]
             1
            121
           12321
          1234321
         for(var a=1;a<=4; a++){
             for(var c=1;c<=4-a;c++){
                 document.write("<span style=‘display: inline-block;width: 7px;‘></span>")
             }
             var n=1
             for(var b=1;b<=a;b++){
                 document.write(n)
                 n++
             }
             for(var d=1;d<=a-1;d++){
                 document.write(n-2)
                 n--
             }
             document.write("<br />")
         }
        
        
        
        
[九九乘法表]
 1*1=1
 2*1=2 2*2=4
 3*1=3 3*2=6 3*3=9
…………

    
    document.write("<table border=‘1‘>")
    for(var a=1;a<=9;a++){
        document.write("<tr>")
        for(var b=1;b<=a;b++){
            document.write("<td>"+a+"*"+b+"="+a*b+"</td>")
        }
        document.write("</tr>")
    }
    document.write("</table>")

 

控制台打印ATM 取款机 
              浏览器控制台打印输出
             
              console.log("请输入0-6之间的数字\n111");
             
              \n 表示换行  
             
             \t 制表符，使光标退到下一个制表位。(每个制表位，4个字符；前一制表位若不满4个字符，则后面内容在下一格显示；前一制表位若满4个字符，则后面内容空一个显示；)
            
           console.log("请输入0-6之间的数字\n1111\t2\t333");
    
   
      需求描述：假设一个简单的ATM机的取款过程为：
      首先提示用户输入密码（password），假设默认密码为111111，最多只能输入3次，
      超过3次则提示用户“密码错误，请取卡”，结束交易。
    
     如果用户密码正确，再提示用户选择金额（amount），
     “请输入0到6中任意数字选择对应钱数：0?手动输入金额,1?100元, 2?300元,
      3?500元, 4?1000元, 5?3000元, 6?5000元”。
    
     输入数字如果错误，提示“输入错误，是否继续 Y/N”，选择Y重新提示输入钱数编号，
     选择N提示“输入错误，请取卡！”。选择数字为1到6，打印对应钱数，
     并提示“是否继续 Y/N”。选择数字0，ATM机只能输出100元纸币，
     自定义钱数要求最低为100元，最高为1000元。如果用户输入的金额符合上述要求，
     则打印输出用户取的钱数，并提示“取款完成，是否继续Y/N”；否则输出一句话“金额错误，
     是否继续 Y/N”,如果用户输入Y，提示用户重新选择取款金额，如果用户输入 N，
     打印“交易取消，请取卡！”
    
     ps：取款成功后，应该提示用户是否继续，总取款金额不能超过2万
   


     【解题思路】
      1、验证密码
         ① 密码正确，继续执行下面操作；
         ② 密码错误3次，return；
     2、取款操作。全部包含在 while循环内部。
         ① 提示选择编号；
         ② 根据编号，给money赋值。用switch结构实现。
            1~6：直接给money赋固定值，0：手动赋值操作；
         ③ 验证取款是否成功。money-本次取款金额，moneySum-本次取款之前的总金额
           判断moneySum+money是否>20000,3种情况:
               >2000 本次取款超额，但moneySum之前并不足20000，继续下次循环；
               =2000 取完本次money后，刚好满额。money可以加到sum上，然后return；
               <2000 取完本次money后，仍未上限。money可以加到sum上，继续下次循环。
         ④ 验证是否继续，while-if结构实现，有3种情况：
               Y/y 将小循环break，继续执行取款大循环；
               N/n 直接return，停止所有操作；
               其他 continue，继续执行小循环，重复输入Y/N
    
        代码开始
        
        function func(){
        console.log("***********欢迎使用ATM机取款业务**********");
        验证密码
        var i = 1;
        for(; i <= 3; i++) {
            console.log("请输入密码：");
            var pwd = parseInt(prompt("请输入密码："));
            if(pwd == 111111) {
                console.log("密码输入正确！");
                break;
            }
        }
        if(i > 3) {        
            return;
        }
        console.log("************请根据序号进行取款************");
        取款操作
        var moneySum = 0; //取款总金额
        var money = 0; //本次取款金额
        while(true) {
            console.log("0-手动输入金额");
            console.log("1-100元\t\t2-300元\t\t3-500元");
            console.log("4-1000元\t\t5-3000元\t\t6-5000元");
            console.log("请选择：");
            var chooseNum = parseInt(prompt("请选择取款序号0-6："));
            switch(chooseNum) {
                case 1:
                    money = 100;
                    break;
                case 2:
                    money = 300;
                    break;
                case 3:
                    money = 500;
                    break;
                case 4:
                    money = 1000;
                    break;
                case 5:
                    money = 3000;
                    break;
                case 6:
                    money = 5000;
                    break;
                case 0:
                    while(true) {
                        console.log("请输入取款金额：");
                        money = parseInt(prompt("请输入取款金额："));
                        if(money >= 100 && money <= 1000 && money % 100 == 0) {
                            break;
                        } else {
                            console.log("您输入的金额不合法,");
                            continue;
                        }
                    }
                    break;
                default:
                    console.log("序号选择错误!");
                    break;
            }
        
            验证总取款金额是否超过20000
            if(moneySum + money < 20000) {
                console.log("取款成功，本次取款" + money + "元，");
                moneySum += money;
                console.log("总取款" + moneySum + "元");
            } else if(moneySum + money == 20000) {
                console.log("取款成功，本次取款" + money + "元，");
                moneySum += money;
                console.log("总取款" + moneySum + "元");
                console.log("今日取款已达上限，情取卡！");
                break;
            } else {
                console.log("取款失败！每日取款上限20000元，您已取" +
                    moneySum + "元，还可取" + (20000 - moneySum) + "元");
            }
        
            验证是否继续
            while(true) {
                console.log("是否继续(Y/N)：");
                var isGoON = prompt("是否继续(Y/N)：");
                if(isGoON == ‘y‘ || isGoON == ‘Y‘) {
                    break;
                } else if(isGoON == ‘n‘ || isGoON == ‘N‘) {
                    return;
                } else {
                    console.log("输入有误，请选择Y-继续，N-退出，");
                }
            }
        }
        
        console.log("感谢您的使用！");


        代码结束
    }

           判断正整数    
            判断是否为正数         Number(num)>0 肯定正确
            parseFloat(a)==parseInt(a) 肯定是整数

while(true){
                var a = prompt("请输入一个数");
            if(Number(a)>0&&parseFloat(a)==parseInt(a)){
               break;
            }
            }
          while(a>10){
              var b = parseInt(a%10);
              document.write(b);
              a = parseInt(a/10);
          }

 

              编写一个程序，最多输入十个数字，并求出其中所有正数的和，用户可通过输入999终止程序，统计用户输入的正数个数，并显示这些数的和
              输入非数值，不占用十次机会，但要求重新输入。
              输入的是数值，只累加正数。
          
            var sum=0,count=0;
           document.write("您输入的数值为：");
            for(var a=1;a<=10;){
                var num = prompt("请输入第"+count+"个数") ;
                if(!Number(num)&&Number(num)!=0){
                    //非数值
                    continue;
               }
                if(num==999){
                    break;
                }
                document.write(num+"&nbsp");
                if(num>0){
                    sum+=parseFloat(num);
                    count++;    
                }
               a++
            }
            document.write("您输入了"+count+"个数");
            document.write("<br />正数的和为"+sum);
           
            
            
    简易ATM取款机   
       
        var isTrue =false;
          for(var n=1;n<=3;n++){
            num = prompt("请输入密码：");
            document.write("您输入的密码："+num+"<br />")
            if(num==111111){
                isTrue=true;
                break;
            }else{
                
            }
            
         }
          if(!isTrue)alert("密码输入错误，请取卡")
               
          while(isTrue){
                   
                    a =prompt("请输入金额")
                    
                  if(a>0&&a<=1000&&a%100==0){
                      document.write("您取了"+a+"元！<br />交易完成，请取卡");
                      break
                  }else{
                     alert("请重新输入金额");
                     document.write("您输入的金额有误，请重新输入金额:"+a+"<br />")
                  }
              
          }

请输入某年某月某日，并判断是这一年的第几天
         
      var year = parseFloat(prompt("请输入年份"));
       var month = parseFloat(prompt("请输入月"));
       var day = parseFloat(prompt("请输入日期"));
       var sum = 0;
         假设是平年 2月28日

         方法一
     for(var i=1;i<month;i++){
          if(i==1||i==3||i==5||i==7||i==8||i==10||i==12){
             sum+=31;
         }else if(i==4||i==6||i==9||i==11){
             sum+=30;
         }else if(i==2){
              sum+=28;
          }
      }
   if((year%4==0&&year%100!=0||year%400==0)&&month>2){
              sum+=(day+1);
         }else{
              sum+=day;
          }
      document.write(sum) ;

         方法二
      switch(month-1){
          case 12 :
             sum+=31
          case 11:
             sum+=30
          case 10 :
             sum+=31;
          case 9 :
             sum+=30;
          case 8 :
             sum+=31;
          case 7 :
             sum+=31;
          case 6 :
             sum+=30;
          case 5 :
             sum+=31;
         case 4 :
             sum+=30;
          case 3 :
           sum+=31;
          case 2 :
             sum+=28;
          case 1 :
             sum+=31 ;
         
      }
      if((year%4==0&&year%100!=0||year%400==0)&&month>2){
              sum+=(day+1);
         }else{
              sum+=day;
          }
      document.write(sum) ;

BOM 函数

[函数的声明即调用]
             1 函数声明的格式
             使用function  函数名(参数1，参数2,……………){
                  函数体
                 return 结果；
             }
              函数调用的格式。
             函数名(参数1的值，参数2的值，参数3的值，………………)
             2 函数声明的几点强调
                ①函数名的声明，必须符合小驼峰法则，首字母小写，之后每个首字母大写。
                ②参数列表可以有参数可以无参数，分别称为有参函数和无参函数。、
                ③声明函数时的参数列表称为形参列(变量的名)，调用参数是的列表称为实参列表(变量的值)。
                 函数中实际有效的参数取决于实参的赋值，未被赋值的形参，称为Undefined。
                ④函数如果需要返回值，可用return返回结果，
                 调用函数时，使用var 变量名=函数名();的方式，接受返回结果。
                 如果没有返回值，则接受的结果为Undefined;
                ⑤函数中变量的作用域；
                 在函数中，使用var声明的变量，默认为函数局部的变量，只在函数内容能用
                 不适用var声明的变量，默认为全局变量，(函数中的全局变量，必须在函数调用后，才能使用)
                 函数的形参列表，为函数局部的变量，只能在函数内部使用。
                ⑥函数声明和函数调用没有先后之分，即，调用语句可写在声明语句之前。
 
            function func1(){
                console.log("调用无参函数");
            }
            func2(1,2,3)
 
            var func2Num;
            function func2(num1,num2,num3){
                func2Num = num1;
                console.log("调用有参函数");
                console.log("num为："+num)
                console.log("参数1为："+num1)
                console.log("参数1为："+num2)
                console.log("参数1为："+num3)
                return true;
            }   
            var num = func2(1,2,3);
            console.log(num)
        
[匿名函数的声明及调用]
             1  声明一个匿名函数，直接发个一个事件，
             window.onload=function(){}\
             2 使用函数表达式，声明匿名函数
                     声明函数表达式   var func = function(){}
                     调用函数表达式    func();
               >>>使用匿名函数表达式，则调用语句，必须在声明语句之后，否则报错，(对比常规函数声明与调用的区别)      
             3 使用自执行函数，声明并直接调用匿名函数
               ！function(参数1){}(参数1的值);//使用任意运算符，一般用!
               (function(){}());//使用()将匿名函数及之后的括号包括
                (function(){}）()//使用（）只包裹匿名函数表达式
               三种写法特点：
              ①  结构清晰，开头加！，结尾加() 不易乱，推荐使用.
              ②  可以表明匿名函数与之后的()为一个整体，推荐使用。
              ③  无法表明匿名函数与之后的()为一个整体，不推荐使用。
                
         
            window.onload=function(){
                console.log("使用window.onload调用匿名事件");
            }
            

            var func3 = function(){
                console.log("使用函数表达式，调用匿名函数。")
            }
            func3();
            

            !function(){
                console.log("使用函数表达式，调用匿名函数。")
            }();
            
            (function(){
                console.log("使用函数表达式，调用匿名函数。")
            }());
            
            (function(){
                console.log("使用函数表达式，调用匿名函数。")
            })();
            

            !function(num){
                console.log("使用函数表达式，调用有参函数，参数为:num="+num)
            }(1);
        
[函数内部的属性]
             [arguments对象]
             1  作用  用于保存调用函数时，所赋值的实参列表。
             >>>当我们调用函数，并使用实参赋值时，实际上参数已经保存在arguments数组中，即使没有形参，也可以使用arguments[]的形式调用函数。
             2 arguments数组的个数，取决于实参列表，与形参无关。(顺序从0开始)
                     但当第N个位置的实参，形参，arguments都存在时，形参与arguments是同步的，及在函数中修改其中一个的值，另一个也会同步变化。
             3 arguments.callee是arguments的重要属性，用于返回arguments所在函数的引用。
               arguments.callee()可以调用自身函数执行。
                      在函数内部调用函数自身的写法，被称为递归，所以arguments。callee ()是递归调用时常用的方式。    
              [this]:
              指向函数调用语句所在的作用域，即谁调用函数，this指向谁。
              
          
            
            function func6(){
                function func6_1(){
                    return this;
                }
                console.log(func6_1())
                return this;
            }
            console.log(func6())
            
            
            function func4(num1,num2,num3,num4,num5){
                console.log("Arguments")
                console.log(arguments[0]);
                console.log(arguments[1]);
                console.log(arguments[2]);
                console.log(arguments[3]);
                console.log(arguments[4]);
                
                //arguments.callee();
                //func4();
            }
            func4(1,2,3,4);
            
            
            
            console.log(num)
            var num =10
            funN();
            function funcN(){}
          1上述代码执行流程
            JS中代码运行，会先进行检查，装载，即声明变量，函数等操作，
            然后再进行执行阶段，(变量的赋值等属于执行阶段)
            所以函数的声明属于检查装载阶段，函数调用属于执行阶段，所以，函数调用语句写在函数声明语句之前，并没有任何关系
            所以上述代码执行流程
            检查装载阶段
            var num；  声明变量
            function funcN{}  声明函数
            执行阶段
            console.log(num);
            num=10;
            funcN{};  执行函数的{}中的代码。