当前位置：网站首页>JS——循环结构经典例题解析与分享

JS——循环结构经典例题解析与分享

2022-08-09 14:44:00 【Bonsoir777】

文章目录

前言
一、求解100以内奇数与偶数各自的和
二、求解1000以内的水仙花数
三、求解1000以内的素数
四、打印九九乘法表
五、鸡兔同笼问题
总结

前言

前文我们介绍了js中的循环结构（感兴趣的小伙伴欢迎翻阅以往文章）“纸上得来终觉浅，绝知此事要躬行”，掌握了理论知识之后还是要注意与实际应用相结合，本文主要讲述的是关于js的例题解析与分享，希望可以帮助到屏幕前的你。

一、求解100以内奇数与偶数各自的和

1.解析：

首先我们要理解这个例题的需求——是要求和，那就势必要定义变量接收这个结果。在这里要求出奇数与偶数各自的和，所以要定义两个变量。
其次，我们可以发现求和的这个过程是重复的，虽然在这里我们应该采用循环结构实现。

2.js实现过程：

<!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>
</head>
<body>
    <script>
        var even = 0;
        var odd = 0;
        for(var i=1;i<101;i++){
            if(i % 2 == 0){
                even+=i;
            }else{
                odd+=i;
            }
        }
        document.write('100以内的偶数和是'+even+'\n');

        document.write('100以内的奇数和是'+odd);
    </script>
</body>
</html>

二、求解1000以内的水仙花数

1.解析：

首先我们要明白什么是水仙花数——水仙花数是指一个 n 位数 ( n≥3 )，它的每个位上的数字的 n 次幂之和等于它本身。（例如：1^3 + 5^3 + 3^3 = 153）。
其次，1000以内的水仙花数，那这个数字一定是三位数，所以变量的初始值与结束值应该在100-999之间。
1^3 + 5^3 + 3^3 = 153，依据这个关系，我们只要办法求解出这个数字的百位数、十位数、以及个位数并用变量接收这三个数字，再根据它是否满足水仙花数的判断调价——1^3 + 5^3 + 3^3 = 153，即可

2.js实现过程：

<!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>
</head>

<body>
    <script>
        // 定义变量接收三位数字
        var a = 0;
        var b = 0;
        var c = 0;
        // 定义接收变量接收三位数字次方的和
        var s = 0;
        for (var i = 100; i <= 999; i++) {
            // 分解出百位数
            a = parseInt(i / 100);
            // 分解出十位数
            b = parseInt((i % 100) / 10);
            // 分解出个位数
            c = i % 10;
            s = (a * a * a) + (b * b * b) + (c * c * c);
            // 判断语句
            if (i == s) {
                document.write('1000以内的水仙花数是:' + s);
                document.write('<br>');
            }
        }
    </script>
</body>

</html>

三、求解1000以内的素数

1.解析：

首先我们要弄清楚什么是素数——素数又叫质数（prime number），有无限个。质数定义为在大于1的自然数中，除了1和它本身以外不再有其他因数。
如何判断是素数，在这里我选择使用一个标识符并定义其初始值为true,在循环结构内遍历100以内的数字时，监测这个标识符的值是否发生改变。

2.js实现过程：

<!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>
</head>

<body>
    <script>
        // 使用for循环遍历1-100之间的数字
        for (var i = 1; i <= 100; i++) {
            // 定义标识符并赋予初始值true
            var flag = true;
            // 根据素数的含义，定义循环结构
            for (var j = 2; j < i; j++) {
                //求解若不是质数，则表示符的值更改为false
                if (i % j == 0) {
                    flag = false;
                    break;
                }
            }
            //判断是质数并输出结果
            if (flag == true) {
                document.write(i);
                document.write('<br>');
            }
        }
    </script>
</body>

</html>

四、打印九九乘法表

1.解析：

在实现之前，我们可以先观察上图九九乘法表的结构，最主要的问题，我们应该定义两个变量控制行数和列数，再考虑每一项目的输出打印结构

2.js实现过程：

<!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>
</head>

<body>
    <script>
        // 定义外层循环控制行数
        for (var i = 1; i <= 9; i++) {
            // 定义内层循环内控制列数
            for (var j = 1; j <= i; j++) {
                // 实现每一项的输出打印
                document.write(j + '*' + i + '=' + (i * j) + '&nbsp;&nbsp;&nbsp');
            }
            // 换行语句
            document.write('<br>');
        }

    </script>
</body>

</html>

五、鸡兔同笼问题

题目：鸡兔同笼一共50只，脚160 ，求鸡多少只，兔子多少只。

1.解析：

鸡兔同笼的问题十分的经典也是童年里的一道必做题，可以通过列方程式来解决，在这里我们也可以利用这个思想解决这个问题。
这里有两个未知数就是兔子和鸡的数量，所以可以定义两个变量表示，再根据题目里的条件判断即可。

2.js实现过程：

<!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>
</head>

<body>
    <script>
        // 外层结构定义变量表示鸡的数量
        for (var i = 1; i <= 50; i++) {
            // 内层结构定义变量表示兔子的数量
            for (var j = 1; j <= 50; j++) {
                if (2 * i + 4 * j == 160 && i + j == 50) {
                    document.write('鸡共有' + i + '只' + '\n');
                    document.write('<br>');
                    document.write('兔共有' + j + '只');
                }
            }
        }
    </script>
</body>

</html>