前端基础 JS 流程控制语句 (4)_前端和控制层连接语句-优快云博客

本文详细介绍了JavaScript中的循环结构（for、while）及其控制语句（break、continue），并通过实例展示了如何使用这些结构来实现特定的功能。此外，还探讨了分支语句（if、switch）的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

for循环

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>for</title>
    <style>
     body{text-align:left;}
    </style>
</head>
<body>
   <script>
     // 1-100 101   1 2 3 4
     // 循环的初始值   // 循环条件  变量的变化
     for(var i=1;i<=100;i++){
        document.write(i+'<br />');   // 1 2 3 100
     }
     // 输出99 97 95 ...3 1 
     for(var m=99;m>=1;m-=2){
        console.log(m);   // 99 97 3 1
     }
     //alert(m);   // -1
   </script>
</body>
</html>

循环嵌套

 for(var i=1;i<=9;i++){       
                       // i=1; j<=1;  i=2;
      for(var j=1;j<=i;j++){
         document.write(j+'*'+i+'='+j*i+'&nbsp;&nbsp;'); 
               // 1*1=1  1*1=1 2*2=4
          }
          document.write('<br />');
       }

分支语句

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
       /*var age=35;
       if(age<18){
          alert("您还没有成年");
       }
       var age=prompt("请设置您的密码");
       /*if(age<18){
          alert("您还没有成年");
       }else{
          alert("您已成年，请提供您的身份证号");
       }
       if(age.length!=6){
          alert("请输入6位数字密码");
       }else{
          if(isNaN(age)){
            alert("密码必须是6位数字");
          }else{
            alert("密码设置正确");
          }
       }*/
       var score=prompt("请输入成绩");
       var result="";
       if(isNaN(score)){
          alert("成绩必须是数字");
       }else{
          if(score<0 || score>100){
             alert("您输入的成绩有误");
          }else{
             switch(parseInt(score/10)){
                case 0:
                case 1:
                case 2:
                case 3:
                case 4:
                case 5:
                result="不及格";
                break;
                case 6:
                result="及格";
                break;
                case 7:
                result="一般";
                break;
                case 8:
                result="良";
                break;
                case 9:
                result="优";
                break;
                default:
                result="满分"
             }
             alert("您的成绩为："+result);
          }
       }
    </script>
</body>
</html>

while

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>while</title>
</head>
<body>
    <script>
       var i=1;
       while(i<=100){
          document.write(i+'<br />');   // 1 2 100
          i+=1;  // i++
       }

       //1 - 10
      /* var j=18;
       do{
          if(j%2==0){
             console.log(j);
          }
          j++;
       }while(j<=10);
*/
       // 1+2+3+4+...100=?

       // sum=0+1=1
       // sum=0+1+2
       // sum=0+1+2+3
       // sum=0+1+2+3+4
       var sum=0;   // sum和
       var n=1;
       while(n<=100){
          sum+=n;   // sum=sum+n;  // sum=0+1; sum=0+1+2+3+100
          n++;
       }
       console.log(sum);
    </script>
</body>
</html>

switch

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
       for(var i=0,col="";i<=100;i++){
          switch(i%4){
             case 0:
             col="red";
             break;
             case 1:
             col="green";
             break;
             case 2:
             col="blue";
             break;
             default:
             col="orange";
          }
          document.write('<font color="'+col+'">'+i+'</font><br>');
       }
    </script>
</body>
</html>

continue&break

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>break与continue</title>
</head>
<body>
    <script>
       var num=0;
       for(var i=1;i<10;i++){
          // 如果i是5的倍数，退出
          if(i%5==0){
             break;
          }
          num++;   // i=1,num=1;i=2,num=2;i=3,num=3,i=4,num=4,i=6,num=5
       }
       //console.log(num);
       for(var s=0,j=1;j<=10;j++){
          if(j%5==0){
             continue;
          } 
          s+=j;
          // j=1,s=1;j=2,s=3;j=3,s=6;j=4,s=10,j=5,s=10;j=6,s=16,j=7,s=23;j=8,s=31;j=9,s=40,j=10
       }
       //console.log(s);
       // 打印所有0-50之间除20和30之外的5的倍数
       for(var n=0;n<=50;n+=5){
          if(n==20 || n==30){
             continue;
          }
          console.log(n);
       }
    </script>
</body>
</html>