循环结构:程序反复执行同一套代码段。遇到结束条件,会结束执行。

没有循环结束条件,永远循环执行——死循环

循环三要素:

1.循环条件:循环继续执行的条件。 一旦循环条件不满足,循环立刻退出~

2.循环变量:用户条件中做判断的变量

循环变量都会向循环退出的趋势变化(不满足循环条件的趋势) ------循环计数器

3.循环体:每次循环要做的事情

while循环:当满足条件时,就继续循环做。。。事

var 循环变量;

while(循环条件){

  循环体;

  迭代变化循环变量;

}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <script type="text/javascript">
      //申明循环变量
      var round = 0;
      //先判断条件
      while(round<3){    
        if(round==2){
          console.log("晕");
          break;
        }
        round++;
        console.log(round);
      }
      console.log("停车");
    </script>
  </body>
</html>

 

break:退出结构

while中何时用break:循环条件不满足之前,希望强行退出循环。

如何使用break? 可以放在任何需要退出循环的位置。

实例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var n=10;
            //循环条件:input!=n&&input!='exit'
            //循环变量:input
            var input=-1;
            while(input!=n&&input!='exit'){
                input=prompt("你猜:");
                if(input!=""){  //防屌丝 不输入
                    if(input=="exit"){
                        console.log("放弃了");
                        break;
                    }else{
                        input=parseInt(input);
                        if(n>input){
                            alert("输入小了");
                        }else if(n<input){
                            alert("输入大了");
                        }else{
                            alert("猜对了");
                        }
                    }
                }
                
            }
        </script>
    </body>
</html>

while 中用的循环变量基本都是全局变量中的。

随机数:Math.random():0<=n<1

任意min--max之间区随机数

 

公式:parseInt((Math.random()*(max-min+1)+min))

例如:60 -- 100

   0<=n<1

    0<=n*41<41

    60<=parseInt(n*41+60)<=100

 

do-while循环:先执行一次循环体,再判断是否继续 !

如果第一次循环条件不满足,循环体至少可以执行1次!

var 循环变量;

do{

  循环体;

  迭代变换循环变量;

}while(循环条件);

用do..while玩猜游戏。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var n=parseInt((Math.random()*(10-0+1)+0));do{
                var input=prompt("你猜:");
                if(input!=""){  //防屌丝 不输入
                    if(input=="exit"){
                        console.log("放弃了");
                        break;
                    }else{
                        input=parseInt(input);
                        if(n>input){
                            alert("输入小了");
                        }else if(n<input){
                            alert("输入大了");
                        }else{
                            alert("猜对了");
                        }
                    }
                }
            }while(input!=n)
        </script>
    </body>
</html>

while vs do while:

如果第一次条件就可能不成,也想执行一次,必须用do while

如果第一次条件一定满足,do  while 等效于while。

 

for:完全等效于while循环。

循环变量变化规律固定,循环次数已知/固定

语法:

for(声明并初始化循环变量;循环条件;迭代循环变量){

  循环体;

}

计算1到100的和:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            // 1...100的和;
       //sum=1+2+3+...+100;
       var sum = 0 ;
            //循环条件:加数<=100
            //循环变量:加数,从1开始,每次加1
            //循环体:sum+=加数
            for(var i=1; i<=100; i++){
                sum+=i;
            }
            console.log(sum);  //5050
        </script>
    </body>
</html>

 

以上代码 ,一句话可以实现,不包括console.log

javascript 循环树形 js循环结构_i++

javascript 循环树形 js循环结构_javascript_02

for(var i=1,sum=0;i<=100;sum+=i++);
console.log(sum);

View Code

continue:跳过本轮循环,继续下轮循环

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            var bao=4;
            for(var box=1; box<=9; box++){
                //if(box==bao){
                //    continue;   //如果box==bao就跳过  也就是说  不等于bao的时候 跳 用下边的方式更好 尽量少使用continue
                //}
          if(box!=bao){
            console.log("跳到"+box);
          }
                
            }
        </script>
    </body>
</html>

输出5个2000年后的闰年

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <script type="text/javascript">
            //输出5个2000以后的闰年
            //循环条件:得到的闰年个数<5
            //循环变量:得到的闰年个数,0开始,每次+1
            //循环体:判断当前年份,是否闰年
            //如果是,就输出,并且+1
            var count=0;
            var year=2001;
            while(count<5){
                if((year%4==0 && year%100!=0)||(year%400==0)){
                    console.log(year);
                    count++;
                }
        if(count>0){
           year+=4;  //只要找到一个闰年 就让它在之后的循环中+4;
         }else{
                  year++; //每判断一年,year就+1;
         }

            }
        </script>
    </body>
</html>

 遇到复杂问题:

先用简单方法做最简单的事情。

从简单办法中找规律!

九九乘法表代码如下:  嵌套循环

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script type="text/javascript"> 
        //第9行
        var str="";
        for(var i=1;i<=9;i++){
            str+=i+'*'+9+"="+(i*9)+" "        
        }
        console.log(str);
        //第8行
        var str="";
        for(var i=1;i<=8;i++){
            str+=i+'*'+8+"="+(i*8)+" "        
        }
        console.log(str);
        //第7行
        var str="";
        for(var i=1;i<=7;i++){
            str+=i+'*'+7+"="+(i*7)+" "        
        }
        console.log(str);
        //从中找规律
        
        //打印任意一行
        //循环条件:行数<=9;
        //循环变量:行数,从1开始,每次+1
        
        for(var n=1;n<=9;n++){
            var str="";
            for(var i=1; i<=n; i++){
                str+=i+"*"+n+"="+(i*n)+" ";
            }
            str+="<br/>"   //换行
            document.write(str);
            //console.log(str)
        }
    </script>
</body>
</html>

打印3角***********

javascript 循环树形 js循环结构_i++

javascript 循环树形 js循环结构_javascript_02

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script type="text/javascript">
        for(var n=1;n<=4;n++){
            var str="";
            for(i=1;i<=n;i++){
                str+="*";
            }
            str+="<br/>";
            document.write(str);
        }
        
    </script>
</body>
</html>

View Code

输入分数,当输入-1时 ,退出 并打印出所有输入的分数的平均数

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script type="text/javascript">
        //分析过程
        //循环条件:input!="-1"
        //循环变量:input
        //循环体:
        //总分+=input;
        //人数++;
        //平均=总分/人数
        var sum=0;
        var count=0;
        do{
            var input=parseInt(prompt("输入成绩:"));
            if(input==-1){
                break
            }else{
                sum+=input;
                count++;
            }            
        }while(true);
        var pjf=(sum/count).toFixed(1); //1位小数
        console.log("评分:"+pjf);
        
    </script>
</body>
</html>

 找出水仙花数

水仙花数(自恋数)
          例如

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <script type="text/javascript">
        /*水仙花数(自恋数)
          153=1*1*1+5*5*5+3*3*3
        */
        //循环条件: num<=999
        //循环变量: num从100开始,每次+1
        /*循环体
          取出百位
          取出十位
          取出各位
          判断 num ==百位*百位*百位+....
          输出num
        */
        for(var num=100;num<=999; num++){
            //百位
            var baiwei=parseInt(num/100);
            //十位
            var shiwei=parseInt((num%100)/10);
            //个位
            var gewei=num%10;
            if(num==(baiwei*baiwei*baiwei+shiwei*shiwei*shiwei+gewei*gewei*gewei)){
                console.log(num);  //153  370  371  407
            }
        }    
</script>
</body>
</html>

 

153=1*1*1+5*5*5+3*3*3