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 + "
");
    i++;   //循环变量的增值
}
方法二:
var i =1;    //循环变量以及初始值
while(true){
  document.write("我爱你啊" + i + "
");
   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("");
for(var i = 0 ; i < 10 ; i++){
       document.write("
");
       //打印的td
      for(var k = 0 ; k < 10 ; k++){
           document.write("
");
      }
       document.write("
");
  }
document.write("
");
</script>
2.九九乘法表:
for(var i = 1 ; i <= 9 ; i++){
   for(var j = 1 ; j <= i ;j++){
       document.write(j + "*" + i + "=" + i * j + "    ");
  }
   document.write("

")
}

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 + "   ");
       //每打印一个闰年,计数器加1,当计数器能被4整除的时候,打印一个换行
       count++;
       if(count % 4 == 0){
           document.write("
");
      }
  }
}
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("
" + " ");
      }
   document.write("
");
}
</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;

转载于:https://www.cnblogs.com/ljp1997/p/11428397.html

你可能感兴趣的