前端之JS篇(四)——三种循环(for&while&do...while)

已于 2022-10-01 11:21:27 修改
阅读量1.4k 收藏 2
点赞数
分类专栏： 前端 文章标签： 前端 javascript vscode
于 2022-09-12 12:24:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57021623/article/details/126815655
版权

前言: JS的流程控制分为顺序结构，分支结构和循环结构

1.JS的循环

循环的目的:

在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句。

在js中，主要有三种类型的循环语句:

for循环

while循环

do…while循环

1.1 for循环

在程序中，一组被重复执行的语句被称为循环体，能否继续重复执行，取决于循环的终止条件。由循环体及循环的终止条件组成的语句，被称之为循环语句。

语法结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sO78OyPL-1662956105149)(Typora_image/120.png)]

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
        1.for 重复执行某些代码，通常跟计数有关系
        2.for 语法结构
        for  (初始化变量;条件表达式;操作表达式) {
            循环体
        }

        初始化变量: 就是用var 声明的一个普通变量，通常用于作为计数器使用
        条件表达式: 就是用来决定每一次循环是否继续执行，就是终止的条件
        操作表达式：就是每次循环最后执行的代码，经常用于我们计数器变量进行更新(递增或者递减)
             
        */
        // 重复打印一百句 hello
        for (var i = 1;i <= 100;i++) {
            console.log('hello');
        }
        /* 
        for循环执行过程:
        1.首先执行里面的计数器变量  var i = 1  但是这句话在for里面只执行一次，这里的字母i是index的缩写
        2.去 i < = 100 来判断是否满足条件，如果满足条件，就去执行循环体，不满足条件退出循环
        3.最后去执行i++ i++是单独写的代码 递增  第一轮结束。
        4.接着去执行 i <= 100, 如果满足条件 就去执行 循环体， 不满足条件退出循环  第二轮
        
        
        */
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VYP8BooA-1662956105152)(Typora_image/121.png)]

断点调试

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-LZpzug6F-1662956105155)(Typora_image/122.png)]

1.1.1 for循环重复执行相同代码

新建.html文件，执行效果如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // for 循环可以执行相同的代码
        for (var i = 1; i <= 10; i++) {
            console.log('这是一段循环');
        }

        // 可以让用户控制输出的次数
        var num = prompt('请您输入次数');
        for (var i = 1; i <= num; i++) {
            console.log('hello world');
        }
    </script>
</head>
<body>
    
</body>
</html>

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PcsJNdOe-1662956105158)(Typora_image/123.png)]

1.1.2 for 循环重复不相同的代码

新建.html文件，执行代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // for 循环可以重复执行不同的代码，因为有计数器变量  i 的存在  i每次循环值都会变化
        // 输入一个人的 1- 100 岁
        // 引引加加
        for (var i = 1; i <= 100; i++) {
            if (i == 1) {
                console.log('这个人今年1岁了，hello');
            } else if ( i == 18) {
                console.log('这个人今年18岁了，他成年了');
            } else {
                console.log('这个人今年' + i + '岁了');
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FMbWw7KJ-1662956105159)(Typora_image/124.png)]

1.1.3 for 循环可以重复某些相同操作

for循环因为有了计数器的存在，我们还可以重复的执行某些操作，比如做一些算术运算。

1.1.3.1 案例 ：求1-10之间所有整数的累加和

分析:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jDVVU4kp-1662956105165)(Typora_image/125.png)]

新建.html文件，执行代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var sum = 0;    // 求和  的变量
        for (var i = 1; i <= 100; i++) {
            sum += i
            // 或 sum = sum + i
        }
        console.log(sum);
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Sey3sVeT-1662956105170)(Typora_image/126.png)]

1.1.3.2 案例三小则

新建.html文件，执行代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.求1-100之间所有数的平均值      需要一个 sum 和的变量 还需要一个平均值 average变量
        var sum = 0;
        var average = 0;
        for (var i = 1;i <= 100;i++) {
            sum += i
        }
        average = sum / 100;
        console.log(average);

        // 2.求1-100之间所有偶数和奇数的和   需要一个偶数的和的变量 even   还需要一个奇数和的变量 odd
        var even = 0;
        var odd = 0;
        for (var i = 1; i <= 100;i++) {
            if (i % 2 ==0) {
                even += i;    // even = even + i
            } else {
                odd += i;     // odd = odd + i
            }
        }
         console.log('1-100之间所有的偶数和是' + even);
         console.log('1-100之间所有的奇数和是' + odd);

        // 3.求1-100之间所有能被3整除的数字的和    
        var result = 0;
        for (var i = 1; i <=100; i++) {
            if (i % 3 == 0) {
                result += i      // result = result + i 
            }
        } 
        console.log('1~100之间能被3整除的数字的和是:' + result);
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0RflLhVi-1662956105171)(Typora_image/127.png)]

1.1.3.3 案例：求学生成绩

要求用户输入班级人数，之后依次输入每个学生的成绩，最后打印出该班级总的成绩以及平均成绩。

分析：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rPqn8yI4-1662956105173)(Typora_image/128.png)]

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num = prompt('请输入班级的总人数:');     // num 是总的单击人数
        var sum = 0;  // 求和变量
        var average = 0;  // 求平均值的变量
        for (var i = 1; i <= num; i++) {
            var score = prompt('请您输入第' + i + '个学生成绩'); 
            // prompt取的数字是字符串，如果之间和数字加，都会变成字符串，故需要把字符串转换成数字
            sum += parseFloat(score);
        }
        average = sum / num;
        alert('班级总的成绩是:' + sum);
        alert('班级平均分是:' + average);
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fpKC7ja4-1662956105177)(Typora_image/129.png)]

1.1.3.4 案例：一行打印五个星星

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // var str = '';
        // for (var i = 1;i<= 5;i++) {
        //     str += '★';
        // }
        // console.log(str);
        //  拓展：
        var num = prompt('请输入星星的个数:');
        var str = '';
        for (var i = 1; i <= num; i++) {
            str += '★';
        }
        alert(str);
    </script>
</head>
<body>
    
</body>
</html>

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1rWYXW28-1662956105178)(Typora_image/130.png)]

2.双重for循环

很多情况下，单层for循环并不能满足我们的需求，比如我们要打印一个5行5列的图形、打印一个倒直角三角形等，此时就可以通过循环嵌套来实现。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yNDZgyty-1662956105182)(Typora_image/131.png)]

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
        1. 双重for循环，语法结构
        for (外层的初始化变量;外层的条件表达式;外层的操作表达式) {
            for (里层的初始化变量;里层的条件表达式;里层的操作表达式) {
                // 执行语句;
            }
        }
        2. 把里面的循环看作是外层循环的语句
        3.外层循环循环一次，里面的循环执行全部
        4.代码验证
        
        */
       for (var i =1;i <= 3;i++) {
          console.log('这是外层循环第' + i + '次');
          for (var j =1;j <= 3;j++) {
            console.log('这是里层循环第'+ j + '次');
          }
       }
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-obYWvUEC-1662956105185)(Typora_image/132.png)]

2.1 案例：五行五列星星案例

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DpiUWdvB-1662956105187)(Typora_image/133.png)]

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 打印五行五列星星
        var str = '';
        for (var i = 1;i <= 5; i++) {    // 外层循环负责打印五行
            for (j = 1; j <= 5; j++) {   // 里层循环负责一行打印五个星星
                str += '★';   
            }
            // 如果一行打印完毕5个星星就要另起一行 加 \n
            str += '\n';
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xcOrQCog-1662956105189)(Typora_image/134.png)]

2.2 案例：打印n行n列的星星

要求：用户输入行数和列数，之后在控制台打印出用户输入行数和列数的星星。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 打印n行n列的星星
        var rows = prompt('请您输入行数:');
        var cols = prompt('请您输入列数:');
        var str = '';
        for (var i =1; i<= rows;i++) {
            for (var j= 1; j <= cols;j++) {
                str += '★';
            }
            str += '\n';
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

效果如下:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZWd7v8fh-1662956105192)(Typora_image/135.png)]

2.3 案例: 打印倒(正)三角形

新建.html文件，执行如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 打印倒三角形案例
        var str = '';
        for (var i = 1; i <= 10; i++) {           // 外层循环控制行数
            for (var j = i; j <= 10; j++) {       // 里层循环打印的个数不一样  j =i
                str += '★';
            }
            str += '\n';
        }
        console.log(str);

        // 打印正三角形案例
        var num = '';
        for (var i = 1; i <= 10;i++) {
            for (var j = 1;j <= i; j++) {        // j <= i
                num += '★';
            }
            num += '\n';
        }
        console.log(num);
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u3Pxxszl-1662956105194)(Typora_image/136.png)]

2.4 案例：打印九九乘法表

案例分析

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3FgP5CjT-1662956105195)(Typora_image/137.png)]

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var str = '';
        for (var i = 1; i <= 9; i ++) {         // 外层循环控制行数
            for (var j = 1; j <= i; j++) {      // 里层循环控制每一行的个数   j <= i
                str += j +'×'+i +'='+i*j+'\t';     
            }
            str += '\n';
        }
        console.log(str);
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lMi6d2PP-1662956105197)(Typora_image/138.png)]

2.5 for 循环小结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EmUgO4Yh-1662956105199)(Typora_image/139.png)]

3.while 循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /* 
        1. while 循环语法结构  while 当...的时候
        while (条件表达式) {
            循环体;
        }
        2.执行思路，当条件表达式结果为true 则执行循环体  否则 退出循环
        3.代码验证
        var num = 1;
        while (num <= 1000) {
            console.log('你好');
            num++;
        }        
        4. 里面应该也有计数器  初始化变量
        5. 里面应该也有操作表达式  完成计数器的更新  防止死循环       
        */
    </script>
</head>
<body>
    
</body>
</html>

3.1 while案例

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // while 循环案例
        // 1.打印人的一生，从1岁到100岁
        var i = 1;
        while (i <= 100) {
            console.log('这个人今年'+i+'岁了');
            i++;
        }
        // 2. 计算1~100 之间的所有整数的和
        sum = 0;
        var j =1;
        while (j <= 100) {
            sum += j;
            j++
        }
        console.log(sum);
        // 3. 弹出一个提示框，你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问。
        var message = prompt('你爱我吗？');
        while (message !== '我爱你') {
            message = prompt('你爱我吗？');
        }
        alert('我也爱你呀！')
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4L1AzZWG-1662956105200)(Typora_image/140.png)]

4. do while 循环

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aOpZD2uA-1662956105202)(Typora_image/141.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1.do while 循环 语法结构
        /*
         do {
            // 循环体
        } while (条件表达式)
         */
        // 2. 执行思路：跟while循环的不同地方在于：do while循环先执行一次循环体，在判断条件  如果条件表达式结果为真，则继续
        //              执行循环体，否则退出循环。
        // 3.代码验证  执行一百次'你好'
        var i = 1;
        do {
            console.log('你好');
            i++;
        } while (i <=100);
        // 4. do while  的循环体至少执行一次
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-734gcb96-1662956105203)(Typora_image/142.png)]

4.1 do while 案例

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // while 循环案例
        // 1. 打印人的一生，从1岁到100岁
        var i = 1;
        do {
            console.log('这个人今年' + i+'岁了');
            i++;      // 如果没有这一行，电脑会卡死
        } while (i <= 100)
        // 2. 计算1~100 之间所有整数的和
        var sum = 0;
        var j = 1;
        do {
            sum += j;
            j++;
        } while (j <= 100)
        console.log(sum);
        // 3. 弹出一个提示框，你爱我吗？ 如果输入我爱你，就提示结束，否则，一直询问。
        do {
            var message = prompt('你爱我吗？');
        } while (message !== '我爱你')
        alert('我也爱你呀');
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TNLZp1th-1662956105205)(Typora_image/143.png)]

5.循环小结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZnuSqDv0-1662956105206)(Typora_image/144.png)]

6. continue break

6.1 continue

continue 关键字用于立即跳出本次循环，继续下一次循环(本次循环体中continue之后的代码就会少执行一次)

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // continue 关键字     退出本次(当前次的循环)  继续执行剩余次数循环
        // 案例：1. 吃五个包子，第三个包子没熟，放下，继续吃第四个、第五个包子
        for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                continue;
            }
            console.log('我正在吃第'+i+'个包子');
        }
        // 案例：2.求1~100之间，除了能被7整除之外的整数和
        var sum = 0;
        for (var i= 1;i <= 100; i++) {
            if (i % 7 == 0) {
                continue;
            }
            sum += i;
        }
        console.log(sum);
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZaRJK0Gi-1662956105209)(Typora_image/145.png)]

6.2 break

break 关键字用于立即跳出整个循环(循环结束)。

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //  break
        // 案例：1. 吃五个包子，吃到第三个包子有虫子，其余的不吃了
        for (var i = 1; i <= 5; i++) {
            if (i == 3) {
                break;
            }
            console.log('我正在吃第'+i+'个包子');
        }
    </script>
</head>
<body>
    
</body>
</html>

效果如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E87W1NMe-1662956105210)(Typora_image/146.png)]

7.JS命令规范以及语法格式

7.1 标识符命名规范

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5lSJr5Yj-1662956105211)(Typora_image/147.png)]

8. 循环案例(简易ATM)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iJvrfLyx-1662956105212)(Typora_image/148.png)]

新建.html文件，执行代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var a = prompt('请输入您的操作\n1.存款\n2.取钱\n3.显示余额\n4.退出');
        money = 10;
        while (a > 0) {
            switch (a) {
                case '1':
                    b = prompt('请您输入存入的钱数');
                    money += parseFloat(b);
                    alert('您现在的余额是'+ money);
            a = prompt('请输入您的操作\n1.存款\n2.取钱\n3.显示余额\n4.退出');
                    break;
                case '2':
                    c = prompt('请您输入取走的钱数');
                    if (c > money) {
                        alert('您的余额不足');
                    } else {
                        money -= parseFloat(c);
                        alert('您现在的余额是' + money);
                    }
            a = prompt('请输入您的操作\n1.存款\n2.取钱\n3.显示余额\n4.退出');
                    break;
                case '3':
                    alert('您现在的余额是：'+ money);
            a = prompt('请输入您的操作\n1.存款\n2.取钱\n3.显示余额\n4.退出');
                    break;
                case '4':
                    alert('退出成功');
                    a = false;
                    break;           
            }   
        }   
    </script>
</head>
<body>
    
</body>
</html>

方法二：

新建.html文件，执行代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        cash = prompt('操作:\n1.存款\n2.取钱\n3.显示余额\n4.退出');
        money = 10;
        while (money > 0) {
            if (cash == '1') {
                var dollar = prompt('存钱');
                dollar = parseInt(dollar);
                money = money + dollar;
                alert('余额' + money);
        cash = prompt('操作:\n1.存款\n2.取钱\n3.显示余额\n4.退出')
            }

            if (cash == '2') {
                var dollar = prompt('存钱');
                dollar = parseInt(dollar);
                money = money - dollar
                alert('余额' + money)
        cash = prompt('操作:\n1.存款\n2.取钱\n3.显示余额\n4.退出')
            }

            if (cash == '3') {
                alert('余额'+ money);
        cash = prompt('操作:\n1.存款\n2.取钱\n3.显示余额\n4.退出')
            }

            if (cash == '4') {
                alert('退出成功');
                cash = false;
                break;
            }
        }
    </script>
</head>
<body>
    
</body>
</html>

效果如下
在这里插入图片描述

今晚务必早点睡
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
前端-js基础-循环
mm0122的博客
07-10 675
#博学谷IT学习技术支持循环的目的：在实际问题中，有许多具有规律性的重复操作，因此在程序中要完成这类操作就需要重复执行某些语句
前端从入门到精通---循环(For、While)
ztyjr888的专栏
09-26 820
前端从入门到精通—循环 循环可多次执行代码块，大致循环分为两大类: while、for, 其执行步骤分为如下几步: 声明循环变量; 判断循环条件; 执行循环体操作; 更新循环变量; 然后循环执行2-4，直到条件不成立，跳出循环; 循环中使用 continue 跳出当前循环, 使用 break 结束循环, while、do/while 需要放到变量 i++ 之后。 while 循环: while 循环又分为 普通的 while 循环、do/while 循环 普通的 while 循环while 循环中的表
JS中的三种循环
weixin_30897233的博客
08-07 172
三种循环1.while 2.do while 3.for 1.while: 语法结构：while（条件）{代码块；改变条件} 步骤：1.初始化变量 2.判断条件 3.执行代码块 4.改变初始条件 5.判断条件 2.do while 语法结构: do{代码块}while(条件) ...
js 循环语句（for循环、while、do while）
qq_68971977的博客
05-19 731
可以重复执行某些代码。
前端的几种循环，map forEach等
qq_42957741的博客
11-15 4480
今天给大家分享一些前端的基础知识，循环 forEach循环 let arr = ['node','java','php','go']; // 一般俩个参数 可以加上原数组 val每一项，index索引，arr原数组。 arr.forEach((val,index,arr) => { console.log(val,index,arr) ...
js循环，前端常用的八种循环，你用过几种呢？
王海虎的博客
06-08 4930
let arr = [{title:'aaaa',read:1000,hot:true}, {title:'bbbb',read:300,hot:false}, {title:'cccc',read:2000,hot:true}, {title:'dddd',read:1900,hot:false} ]; // 第一种...
我的PHP学习之旅——PHP基础知识汇总.zip
10-30
3. **流程控制**：包括条件语句（if...else, switch）和循环语句（for, while, do...while, foreach）。这些结构是编写逻辑程序的基础。 4. **函数**：PHP提供了大量的内置函数，同时也可以自定义函数。函数是代码...
JavaScript前端开发程序设计教程（微课版）-教材代码.zip
07-14
2. **控制流程**：JavaScript中的控制流程包括条件语句（if...else, switch）和循环结构（for, while, do...while）。理解这些结构对于编写逻辑复杂的代码至关重要。 3. **函数**：函数是JavaScript中的重要组成...
js.rar_javascript
09-21
2. **控制结构**：包括条件语句（if...else, switch）和循环语句（for, while, do...while）。这些结构是编写逻辑流程的基础，用于根据不同的条件执行不同的代码块。 3. **函数**：函数是JavaScript中可重用的代码...
JavaScript语言案例.zip
04-19
2. **控制结构**：JS提供了if...else语句、switch...case结构、for循环、while循环以及do...while循环来控制程序流程。还有三元运算符用于简洁的条件判断。 3. **函数**：函数在JS中是第一类对象，可以作为变量赋值...
JavaScript_鱼钩很容易织.zip
最新发布
05-21
JavaScript的基础包括变量（var、let、const）、数据类型（如字符串、数字、布尔值、null、undefined、对象、数组、符号、bigint）、运算符（算术、比较、逻辑、位运算、三元运算）以及流程控制（条件语句if...else...
前端js中while循环
个人笔记
03-10 484
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> </html> <script type="text/javascript"> //while循环 // while(条件真假){ // 条件为真 执行 // 为
web前端开发教程-while循环
weixin_34166472的博客
05-14 192
while循环while(循环终止条件){ }案例 案例 打印100以内 7的倍数：案例 打印100以内所有偶数的和for循环 for循环将while循环分离的结构进行了整,将变量的声明自增，以及判断放入了括号中。写法更简单在开发中推荐使用。for( var i = 0 ; i<10; i++ ){ //语句块}for循环的执行顺序。(从上到下，从左到右？...
前端---js（自学笔记8）（while循环）
ABU_MOlI_ITUI的博客
07-03 5963
while循环： 循环语句是可以将一段代码循环执行。 while循环：首先对条件表达式进行判断，如果为true则执行代码块，然后再次进行判断，如果还是true，将再次执行，直到条件表达式为false，循环结束。 语法： while（条件表达式）{ 语句... } do...while循环：首先执行一遍语句，在进行条件表达式的判断，如果为true则继续执行，如果为false，则执行完语句，终止循环。 语法： do{ 语句... }while（条件表达式） wh...
JavaScript循环基本语法
qq_65715980的博客
06-29 393
JS循环的基本语法，以及九九乘法表、倒三角、简易计算器。
【前端-初阶】JS循环
qq_48234463的博客
03-19 549
【前端-初阶】JS三种循环：for循环、while循环、do...while循环
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
见贤思齐焉，见不贤内自省
01-06 3042
JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
前端基础（十四、JS 循环）
小鱼干儿的博客
02-09 210
十四、JS 循环for循环while 循环do while JS中常见的循环有三种，分别是 for 循环、while 循环和 do while，它们与其他语言中的循环没有什么大的不同。 for循环 for循环对字符串和数组操作： var arr = [1,2,3,4,5]; for(var i = 0; i < arr.length; i++){ console.log(arr[i]); } //输出 1
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

今晚务必早点睡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值