js循环（while循环，do while循环,for循环）相关知识点及练习

08.循环

1.循环！

循环的作用：

1. 简化代码，处理重复执行的代码
2. 遍历数组、json对象、节点集合

2.while循环

语法：

while(循环的条件){

循环体

}

3.循环的五大要素

1. 循环变量
2. 循环变量的初始化
3. 循环的增值
4. 循环的终止条件
5. 循环体

eg:在页面中打印100句“我爱你！！”;

方法一：var i = 1;   //循环变量 以及  循环变量的初始值while (i <= 100) {    //循环的终止条件     document.write("我爱你" + i + "<br>");     i++;   //循环变量的增值}方法二：var i =1;    //循环变量以及初始值while(true){   document.write("我爱你啊" + i + "<br>");    i++;    //终止条件    if(i > 100){        break;    }}

09.while循环案例

1.怎么实现1-50的和？

<script>    var i = 1;    var sum = 0;    while(i <= 50){        sum += i;        i++;    }    console.log(sum);</script>

2.打印100以内7的倍数

var i = 1;while(i <= 100){    if(i % 7 == 0 ){        console.log(i);    }    i++;}

3.打印100以内的奇数

var i = 1 ;while(true){    if(i % 2 != 0){        console.log(i);    }    i++;    if( i > 100 ){        break;    }}

4.打印100以内所有偶数的和

var i = 1 ; var sum = 0;while( i <= 100 ){    if( i % 2 == 0 ){        sum += i;    }    i++;}console.log(sum);

1.案例：输入分数，判定成绩等级 优 良 中 差

var num = 100;if( num <= 100 && num > 90 ){    console.log("优")}else if(num <= 90 && num > 80){    console.log("liang")}else if( num <= 80 && num > 70 ){    console.log("zhong")}else{    console.log("差")}

2.输入月份，显示当月的天数 case穿透

分析：1 3 5 7 8 10 12 31天

var month = 2;switch(month){// case 1 : console.log("31天");// break;// case 2 : console.log("28天");// break;// case 3 : console.log("31天");case 1 : case 3 :case 5 :case 7 :case 8 :case 10 :case 12 :    console.log("31天");break;case 4 : case 6 :case 9 :case 11 :     console.log("30天");break;?case 2 : console.log("28天");break;default : console.log("输入错误...");}

01.do while

while的执行逻辑：

首先先进行变量的判断，如果不满足则不进入循环体，如果满足，则进入循环体，循环执行完毕，变量的增值，再进行条件的判断...

do while 的执行逻辑：

首先先进入循环体，执行一次，然后再进行变量的自增，然后再次判断.....

eg: var i = 10;while(i < 15){    console.log(i);    i++;}

练习：入职薪水10k，每年涨幅5%，50年后工资多少?var money = 10000;var year = 1;do{//循环体money *= 1.05;year++;}while(year <= 50);console.log(money);

02.for循环

for循环的执行逻辑：

首先先声明循环变量，为变量赋值，然后进行条件判断。如果条件成立则进入循环体，循环体执行完毕，循环变量增值，自增之后再次对条件进行判断.....

for(语句1,语句2,语句3){    //循环体}语句1：循环变量   以及   初始值语句2：循环的终止条件语句3：循环变量的增值eg:for(var i = 0 ; i < 10 ; i++){    console.log(i);}

练习：1.打印100-200之间所有能被3或者7整除的数for(var i = 100 ; i <= 200 ; i++){    if(i % 3 == 0 || i % 7 == 0){        console.log(i);    }}2.计算100的阶乘var product = 1;for(var i = 1 ; i <= 100 ; i++){    product *= i;}console.log(product);

03.循环嵌套

1.实现表格:<style>    td{        width:100px;        height:30px;        border:2px solid red;    }</style>?<script>    document.write("<table>");    for(var i = 0 ; i < 10 ; i++){        document.write("<tr>");        //打印的td        for(var k = 0 ; k < 10 ; k++){            document.write("<td></td>");        }        document.write("</tr>");    }    document.write("</table>");</script>2.九九乘法表:for(var i = 1 ; i <= 9 ; i++){    for(var j = 1 ; j <= i ;j++){        document.write(j + "*" + i + "=" + i * j + "&nbsp;&nbsp;&nbsp;&nbsp;");    }    document.write("<br><br>")}

04.循环练习

1.打印100以内所有偶数的和var sum = 0;for(var i = 1 ; i <= 100 ; i++){    if(i % 2 == 0){        sum += i;    }}document.write("sum");2.打印出1000-2000年中所有的闰年，并以每行四个数的形式输出（闰年条件：非整百年，被4整除，或者被400整除）var count = 0;for(var i = 1000 ; i <= 2000 ; i++){    if(i % 100 !== 0 && i % 4 == 0 || i % 400 == 0){        document.write(i + "&nbsp;&nbsp;&nbsp;");        //每打印一个闰年，计数器加1，当计数器能被4整除的时候，打印一个换行        count++;        if(count % 4 == 0){            document.write("<br>");        }    }}3.打印直角三角形(5行)<style>    *{        margin:0;        padding:0;    }    div{        width:10px;        height:10px;        background:red;        margin:10px;        display:inline-block;//让显示在同一行    }</style><script>    for(var i = 1 ; i <= 5 ; i++){        for(var k = 1 ; k <= i ; k++){            document.write("<div></div>" + "&nbsp;");        }    document.write("<br>");}</script>4.打印等腰三角形:<style>    *{        margin:0;        padding:0;    }    div{        width:10px;        height:10px;        background:red;        margin:10px;        display:inline-block;//让显示在同一行    }    span{        width:10px;        height:10px;        //background:green;        display:inline-block;        margin:10px;    }</style><script>    //行数    for(var i = 1 ; i <= 5 ; i++){        //空的用每一个span把它挤过去        for(var j = 4 ; j >= i ; j--){            document.write("<span></span>" + "&nbsp;");        }        //等腰三角形的显示        for(var k = 1 ; k <= i ; k++){            document.write("<div></div>" + "&nbsp;");        }    document.write("<br>");}</script>5.求100-900之间的水仙花数。abc =a*a*a + b*b*b +c*c*c(次方函数： Math.pow(x,y);  x的y次方)分析：获取 个位、十位、百位 上面的数字369数   取出 3 6 9;    取9 369 % 10;    取6 parseInt(369 / 10) % 10;    取3 parseInt(369 / 100);拓展：    Math.round();   四舍五入    Math.random();   随机数    Math.pow();     多少平方    Math.ceil();    向上取整    Math.floor();   向下取整for(var i = 100 ; i < 900 ; i++){    var        ge = (i % 10),        shi = (i / 10) % 10,        bai = (i / 100);    if(i == Math.pow(ge,3) + Math.pow(shi,3) + Math.pow(bai,3)){        console.log(i + "是水仙花数");    }}6.求出1-1/2+1/3-1/4+1/5....1/100的结果for(var i = 1 ; i <= 100 ; i++){    if(i % 2 == 0){        sum -= 1 / i;    }    if(i % 2 != 0){        sum += 1/i;    }}document.write(sum);7.菱形：//行数for(var i = 1 ; i <= 5 ; i++){    for(var k = 4 ; k >= 1 ; k--){        document.write("<span></span>");    }    for(var j = 1 ; j <= 2 * i - 1 ; j++ ){        document.write("<div></div>");    }    document.write("<br>");}for(var i = 4 ; i >= 1 ; i--){    for(var k = 4 ; k >= i ; k--){        document.write("<span></span>");    }    for(var j = 1 ; j <= 2 * i - 1 ; j++){        document.write("<div></div>");    }    document.write("<br>");}

05.跳出循环

break continue 执行逻辑：

break:直接跳出结束循环，后面的代码不再执行

continue：跳出当前本次循环，后面的代码继续执行

举例：

1：操场上跑步，预计跑10圈，当跑到6圈 —> 女朋友打电话 -> 停止！ break

eg:for(var i =  1 ; i <= 10 ; i++){    if(i == 6){        break;    }    console.log(i);}?eg:for(var i = 1 ; i <= 10 ;i++){    for(var k = 1 ; k <= 10 ; k++){        if(k == 5){            break;        }        document.write(i + "a");    }    document.write("<br>");}

2：斗地主： 3个人 第二个人 炸弹 第三个人出不去，过！ 第一个人王炸！ continue

eg:输出1-50 里面不包括33的数字for(var i = 1 ; i <= 50 ; i++){    if(i == 33){        continue;    }    console.log(i);}

任务（相关练习）

1.计算 1+2+3+4+5+...+23+25+...+50  //没有24var sum = 0;for(var i = 1 ; i <= 50 ; i++){    if(i == 24){        continue;    }    sum += i;}document.write(sum);2.计算100以内不能被6整除的数的和 (用continue完成)var sum = 0;for(var i = 1 ; i <= 100 ; i++){    if(i % 6 == 0){        continue;    }    sum += i;}document.write(sum);3.求1+2!+3!+...+20!的值var sum = 0 ;var product = 1;for(var i = 1 ; i <= 20 ; i++){    product *= i;    sum += product;}console.write(sum);4.篮球从5米高的地方掉下来，每次弹起的高度是原来的30%，经过几次弹起，篮球的高度小于0.1米。   //4次    什么情况下while和for：        如果当循环次数 不确定的情况下 用while(true);  利用break;var h = 5;var count = 0;while(true){    h *= 0.3;    count++;    if(h < 0.1){        break;    } }document.write(count);5.有一个棋盘，有64个方格，在第一个方格里面放1粒芝麻重量是0.00001kg，第二个里面放2粒，第三个里面放4，第四个盘子放6个   棋盘上放的所有芝麻的重量分析：(找规律)    第一种情况：第四个盘子放6个    让从0算起：    第几个盘子 几粒芝麻        0       1   if(i == 0){num = 1;}        1       2        2       4        3       6var sum = 0;var all = 0;for(var i = 0 ; i < 64 ; i++){    if(i == 0){        sum = 1;    }    else{        sum = 2 *i;    }    all += sum;}console.log(all * 0.00001);?    第二种情况：第四个盘子放8个    让从0算起：    第几个盘子 几粒芝麻        0       1        1       2        2       4        3       8var all = 0;for(i = 0 ; i < 64 ; i++){    if(i == 0){        all = 1;    }    all += Math.pow(2,i);}document.write(all * 0.00001);6.输出100-200之间所有的素数(质数);    分析：素数(质数):除了1和它本身，不能被其它数整除的for(var i = 100 ; i < 200 ; i++){    var flag = true;  //制定口令    for(var j = 2 ; j < i ; j++){        if(i % j == 0){            flag = false;   //如果不设置口令，它每次只是除了2，对2进行了判断            break;        }    }    if(flag){ //如果口令符合则执行        //允许打印了        console.log(i + "是素数");    }}

原文地址：https://www.cnblogs.com/ljp1997/p/11428397.html