四、JavaScript流程控制语句

张小阳_
158 阅读6分钟

637320450905157600RN.jpg                    生活中90%的焦虑， 都是因为懒惰导致的。

if语句

基本使用

image.png if 语句是 JavaScript 中最简单的条件判断语句，语法格式如下：

if(条件表达式){
   // 要执行的代码;
}

当条件表达式成立，即结果为布尔值 true 时，就会执行{ }中的代码。

if语句执行流程图

image.png else可以省略

<!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 num = Number(prompt('请输入数字'));
        if (num == 1) {
            alert('这是我喜欢的数字');
        }
    </script>
</body>

</html>

image.png 单行if语句

image.png if-else-if多条件分支

image.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>
</head>

<body>
    <script>
        var num = Number(prompt('请输入数字'));
        if (num % 2 == 0) {
            alert(num + '是偶数');
        } else {
            alert(num + '是奇数');
        }
    </script>
</body>

</html>

if语句示例

image.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>
</head>

<body>
    <script>
        var age = Number(prompt('请输入年龄'));
        if (age >= 18 && age <= 70) {
            alert('可以');
        } else {
            alert('不可以');
        }
    </script>
</body>

</html>

BMI肥胖指数计算

image.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>
</head>

<body>
    <script>
        var height = Number(prompt('请输入您的身高(m)'));
        var weight = Number(prompt('请输入您的体重(kg)'))
        var bmi = weight / (Math.pow(height, 2));
        if (bmi >= 32) {
            alert('您的BMI指数是：' + bmi.toFixed(1) + '\n' + '属于' + '非常肥胖');
        } else if (bmi >= 28) {
            alert('您的BMI指数是：' + bmi.toFixed(1) + '\n' +' 属于' + '肥胖');
        } else if (bmi >= 24) {
            alert('您的BMI指数是：' + bmi.toFixed(1) + '\n' +' 属于' + '过胖');
        } else if (bmi >= 18.5) {
            alert('您的BMI指数是：' + bmi.toFixed(1) + '\n' +' 属于' + '正常');
        } else {
            alert('您的BMI指数是：' + bmi.toFixed(1) + '\n' +' 属于' + '过廋');
        }
    </script>
</body>

</html>

判断水仙花数

image.png

image.png 方法1

<!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 num = Number(prompt('请输入数字'));
        var g = num % 10;
        var s = parseInt((num / 10) % 10);
        var b = parseInt(num / 100);
        if (!isNaN(num) && num >= 100 && num <= 999) {
            if (Math.pow(g, 3) + Math.pow(s, 3) + Math.pow(b, 3) == num) {
                alert('是水仙花数');
            } else {
                alert('不是水仙花数');
            }
        } else {
            alert('数字不合法');
        }
    </script>
</body>

</html>

方法2

<!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>水仙花数判断</title>
</head>

<body>
    <script>
        var num = Number(prompt('请输入一个三位数'));
        var g = String(num).charAt(2);   //个位
        var s = String(num).charAt(1); //十位
        var b = String(num).charAt(0);  //百位
        if (!isNaN(num) && num >= 100 && num <= 999) {
            if (Math.pow(g, 3) + Math.pow(s, 3) + Math.pow(b, 3) == num) {
                alert('是水仙花数');
            } else {
                alert('不是水仙花数');
            }
        } else {
            alert('请输入合法的数字');
        }
    </script>
</body>

</html>

游乐园门票计算

image.png

image.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>
</head>

<body>
    <script>
        var age = Number(prompt('请输入您的年龄'));
        var data = Number(prompt('请输入游玩时间(星期)'));
        if (age >= 10) {
            // 平日
            if (data == 1 || data == 2 || data == 3 || data == 4 || data == 5) {
                alert('300元');
                // 周末
            } else {
                alert('500元');
            }
            // 小于10岁
        } else {
            if (data == 0 || data == 6) {
                alert('210元');
            } else {
                alert('140元');
            }
        }
    </script>
</body>

</html>

switch语句

JavaScript switch case 语句的语法格式如下：

   switch (表达式){
   case value1:
       statements1 // 当表达式的结果等于 value1 时，则执行该代码
       break;
   case value2:
       statements2 // 当表达式的结果等于 value2 时，则执行该代码
       break;
   ......
   case valueN:
       statementsN // 当表达式的结果等于 valueN 时，则执行该代码
       break;
   default :
       statements // 如果没有与表达式相同的值，则执行该代码
   }

switch 语句根据表达式的值，依次与 case 子句中的值进行比较：

  • 如果两者相等，则执行其后的语句段，当遇到 break 关键字时则跳出整个 switch 语句。
  • 如果不相等，则继续匹配下一个 case。
  • switch 语句包含一个可选的 default 关键字，如果在前面的 case 中没有找到相等的条件，则执行 default 后面的语句段。

注意：switch 语句中，表达式是使用全等（===）来与各个 cese 子句中的值进行匹配的。由于使用的是全等运算符，因此不会自动转换每个值的类型。

switch 语句的执行流程（工作原理）如下图所示： 130F44055-0.png

image.png

image.png

break 关键字

switch 语句是逐行执行的，当 switch 语句找到一个与之匹配的 case 子句时，不仅会执行该子句对应的代码，还会继续向后执行，直至 switch 语句结束。为了防止这种情况产生，需要在每个 case 子句的末尾使用 break 来跳出 switch 语句。 image.png default 语句与 case 语句简单比较如下：

  • 语义不同：default 为默认项，case 为判例。
  • 功能扩展：default 选项是唯一的，不可以扩展。而 case 选项是可扩展的，没有限制。
  • 异常处理：default 与 case 扮演的角色不同，case 用于枚举，default 用于异常处理。

三元运算符

image.png

image.png

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>三元操作符</title>
</head>

<body>
    <script>
        //补充代码
        var score1 = 50;
        var score2 = 70;
        var isPass1 = score1 >= 60 ? '及格' : '不及格';
        var isPass2 = score2 >= 60 ? '及格' : '不及格';
        console.log(isPass1);
        console.log(isPass2);
    </script>
</body>

</html>

image.png

for循环语句

JS for 循环适合在已知循环次数时使用，语法格式如下：

for(initialization; condition; increment) {
    // 要执行的代码
}

for 循环中包含三个可选的表达式 initialization、condition 和 increment，其中：

  • initialization：为一个表达式或者变量声明，我们通常将该步骤称为“初始化计数器变量”，在循环过程中只会执行一次；
  • condition：为一个条件表达式，与 while 循环中的条件表达式功能相同，通常用来与计数器的值进行比较，以确定是否进行循环，通过该表达式可以设置循环的次数；
  • increment：为一个表达式，用来在每次循环结束后更新（递增或递减）计数器的值。

image.png

image.png

image.png

精准遍历for

image.png

image.png

image.png

image.png

image.png 这个什么都不输出： image.png

for循环练习

image.png

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>document</title>
</head>

<body>
    <script>
        for (var i = 18; i >= -6; i -= 4) {
            console.log(i);
        }
    </script>
</body>

</html>

image.png

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>document</title>
</head>

<body>
    <script>
        for (var i = 0; i <= 1; i += 0.2) {
            console.log(Number(i.toFixed(1)));
        }
    </script>
</body>

</html>

image.png 习题 image.png

for循环算法题

image.png

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>document</title>
</head>

<body>
    <script>
        var sum = 0;
        for (var i = 1; i <= 100; i++) {
            sum += i;
        }
        console.log(sum);
    </script>
</body>

</html>

image.png

image.png

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>document</title>
</head>

<body>
    <script>
        for (var i = 1; i <= 100; i++) {
            if (i % 3 == 1 && i % 4 == 2 && i % 5 == 3) {
                console.log(i);
            }
        }
    </script>
</body>

</html>

image.png

while循环语句

while 循环在每次循环之前，会先对条件表达式进行求值，如果条件表达式的结果为 true，则执行{ }中的代码，如果条件表达式的结果为 false，则退出 while 循环，执行 while 循环之后的代码。

while 循环的执行流程如下图所示： 1512103K7-0.png

注意事项

在编写循环语句时，一定要确保条件表达式的结果能够为假（即布尔值 false），因为只要表达式的结果为 true，循环会一直持续下去，不会自动停止，对于这种无法自动停止的循环，我们通常将其称为“无限循环”或“死循环”。

如果不小心造成无限循环，可能会导致浏览器或者计算机卡死。

image.png

image.png

while循环习题

image.png

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>document</title>
</head>

<body>
    <script>
        var n = 0;
        while (n * n < 456789) {
            n++;
        }
        console.log(n);
    </script>
</body>

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

<body>
    <script>
        // 寻找最小的满足n方>456789的正整数n
        // while(true)方法
        var n = 1;
        while (true) {
            if (n * n > 456789) {
                console.log(n);
                break;
            }
            n++;
        }
    </script>
</body>

</html>

image.png

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>document</title>
</head>

<body>
    <script>
        var radish = 1;
        var day = 1;
        while (radish <= 500) {
            radish += day;
            day++;
        }
        // 为防止“出一错误”在这里减一
        console.log(day - 1);
    </script>
</body>

</html>

break 与 continue

通过前面对循环的学习我们知道，默认情况下循环会在表达式结果为假时自动退出循环，否则循环会一直持续下去。某些情况下，我们不用等待循环自动退出，可以主动退出循环，JavaScript 中提供了 break 和 continue 两个语句来实现退出循环和退出（跳过）当前循环，下面我们就来详细介绍一下。

使用 break 语句可以跳出 switch 语句。其实使用 break 语句还可以用来跳出循环，让程序继续执行循环之后的代码（如果有的话）。

image.png continue 语句用来跳过本次循环，执行下次循环。当遇到 continue 语句时，程序会立即重新检测条件表达式，如果表达式结果为真则开始下次循环，如果表达式结果为假则退出循环。 image.png

break 语句用来跳出当前循环，执行循环后面的代码；continue 语句用来跳过当次循环，继续执行下次循环。

label语句

JavaScript lable语句可以声明在任何语句或者代码块之前，并与 break 或 continue 配合来跳出特定的循环，例如当多个循环嵌套使用时，单纯使用 break 只能跳出当前的循环，无法跳出外层循环，如果将 break 与lable语句配合使用，则可以一次跳出多层循环。

语法 lable:statement

说明:

  • label表示标签名
  • statement表示代码块
  • label标签名与statement表示代码块之间使用英文状态下的冒号分隔

示例：

outer:for(var i = 0; i < count; i++){
    alert(i); 
}

这个例子中定义的outer标签可以在将来由break或continue语句引用。加标签的语句一般都要与for语句等循环语句配合使用。

强调 60d6bf5f099ee68d05940299.png 示例

var num = 0;
for (var i = 1; i < 10; i++) {
   if(i % 5 == 0){
      break;
    }
    num++;
}
alert(num)//4

这个例子中的 for循环会将变量由1递增至10。在循环体内，有一个if语句检查i的值是否可以被5整除（使用求模操作符)。如果是，则执行break语句退出循环。另一方面，变量num从0开始，用于记录循环执行的次数。在执行break语句之后，要执行的下一行代码是alert()函数，结果显示4。也就是说，在变量i等于5时，循环总共执行了4次;而break语句的执行，导致了循环在num再次递增之前就退出了。如果在这里把break替换为continue的话，则可以看到另—种结果:

var num = 0;
for (var i = 1; i < 10; i++) {
    if(i % 5 == 0){
      continue;
    }
    num++;
}
alert(num)//8

例子的结果显示8，也就是循环总共执行了8次。当变量i等于5时，循环会在num再次递增之前退出，但接下来执行的是下一次循环，即的值等于6的循环。于是，循环又继续执行，直到等于10时自然结束。而num的最终值之所以是8，是因为continue语句导致它少递增了一次。

break和continue语句都可以与label语句联合使用，从而返回代码中特定的位置。这种联合使用的情况多发生在循环嵌套的情况下，如下面的例子所示:

var num = 0;
outernum: for (var i = 0; i < 10; i++) {
    for (var j = 0; j < 10; j++) {
        if (i == 5 && j == 5) {
             break outernum;
         }
         num++;
    } 
}
alert(num) //55

在这个例子中，outernum标签表示外部的for语句。如果每个循环正常执行10次，则num++语句就会正常执行100次。换句话说，如果两个循环都自然结束,num的值应该是100。但内部循环中的break语句带了一个参数(outernum标签)。添加这个标签的结果将导致break语句不仅会退出内部的for语句（即使用变量j的循环)，而且也会退出外部的for语句(即使用变量i的循环)。为此，当变量i和j都等于5时 , num 的值正好是55。同样，continue语句也可以像这样与label语句联用，如下面的例子所示:

var num = 0;
outernum: for (var i = 0; i < 10; i++) {
   for (var j = 0; j < 10; j++) {
      if (i == 5 && j== 5) {
          continue outernum;
      }
      num++;
   } 
}
alert(num) //95

当i等于5，j等于5的时候，会从第一层for循环开始计算。所以不会计算i等于5，j等于5,6,7,8,9的情况。那么num值会少加5次，最后结果也就是95 。

在这种情况下，continue语句会强制继续执行循环，即退出内部循环，执行外部循环。当j是5时，continue语句执行，而这也就意味着内部循环少执行了5次，因此num的结果是95。

注意 虽然联用break、continue和labeli语句能够执行复杂的操作，但如果使用过度，也会给调试带来麻烦。在此，我们建议如果使用label语句，一定要使用描述性的标签，同时不要嵌套过多的循环。

60d6bf760995b41500000000.png

do while 循环

JavaScript do while 循环与 while 循环非常相似，不同之处在于，do while 循环会先执行循环中的代码，然后再对条件表达式进行判断。因此，无论条件表达式是真还是假，do while 循环都能至少执行一次，而 while 循环就不行了，如果条件表达式为假会直接退出 while 循环。

image.png

image.png

提示 提示：do while 循环与 while 循环还有一点不同，那就是 do while 循环的末尾需要使用分号;进行结尾，而 while 循环则不需要。

do while 循环的执行流程如下图所示：

151U41403-0.png

do while 案例

image.png

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>document</title>
</head>

<body>
    <script>
        var dx = 0;
        var dy = 0;
        do {
            var dx = parseInt(Math.random() * (4 - (-4) + 1)) + -4;
            var dy = parseInt(Math.random() * (4 - (-4) + 1)) + -4;
        } while (dx == 0 && dy == 0);   //循环条件：只要它俩不同时为0，就跳出循环
        // 只要出循环，它俩一定不同时位0
        console.log(dx, dy);    
    </script>
</body>

</html>

随机数函数

Math.random( )

  • 返回一个 0 到 1 之间的随机数
  • random 随机的

image.png

image.png 公式

parseInt(Math.random()∗(b−a+1))+aparseInt(Math.random( )*(b - a + 1)) + a

image.png

猜数字游戏

image.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>猜数字游戏</title>
</head>

<body>
    <script>
        var guess = parseInt(Math.random() * (99 - 2 + 1)) + 2; // 生成随机数
        var min = 1;
        var max = 100;
        while (true) {
            var num = Number(prompt('请猜数字' + min + '~' + max + '之间'));
            if (num >= max || num <= min) {
                alert('超出范围');
                continue;
            }

            if (num > guess) {
                alert('猜大了');
                max = num;
            } else if (num < guess) {
                alert('猜小了');
                min = num;
            } else {
                alert('恭喜你猜对了');
                break;
            }
        }
    </script>
</body>

</html>

编程练习

image.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>
</head>

<body>
    <script>
        // 方法1
        var money = 1000;
        var year = 0;
        var sum = 0;
        while (money <= 2000) {
            money += money * 0.05;
            year++;
        }
        console.log(year);
        
        // 方法2 
        var money = 1000; 
        var year = 0; 
        do { 
            money += money * 0.05; 
            year++; 
        } while (money <= 2000); 
        console.log(year);
    </script>
</body>

</html>

循环总结

606297e009b7193c00000000.png 语法

for (语句 1; 语句 2; 语句 3) {
       要执行的代码块
}

运行流程 606299320907e60806000585.png 例子

 for (var i = 0; i <= 10; i++) {
    console.log(i);
 }

60629b7d09b3680810700550.png 执行过程分析:

这段代码是要在控制台中输出数字0~10

  • 最初，变量 i=0，满足i<=10的条件，故执行代码，在控制台中输出0，然后变量i加1，变量i的值为1。
  • 变量 i=1，满足i<=10的条件，故执行循环体中的代码，在控制台中输出1，然后变量 i加1 变量i的值为2 。
  • 变量 i=2，满足 i<=10的条件，故执行循环体中的代码，在控制台中输出2，然后变量 i加1,变量i的值为3 。
  • 以此类推.....
  • 最后变量i的值为11，不满足 i<=10的条件，所以循环停止，不再执行循环体中的代码。

60629c3d09f9247409000500.png 语法

while (条件) {
    要执行的代码块
}

运行流程 6062ea7e09e7bf7405570453.png 例子

var i = 0;
while (i <= 10) {
  console.log(i)
  i++
}

60629d53097217f610850546.png 执行过程分析:

这段代码是要在控制台中输出数字0~10

  • 最初，变量 i=0，满足i<=10的条件，故执行代码，在控制台中输出0，然后变量 i加1，变量 i的值为1。
  • 变量i=1，满足i<=10的条件，故执行循环体中的代码，在控制台中输出1，然后变量i加1，变量i的值为2。
  • 变量 i=2，满足 i<=10的条件，故执行循环体中的代码，在控制台中输出2，然后变量i加1，变量i的值为3
  • 以此类推......
  • 最后变量 i=11，不满足i<=10的条件，所以循环停止，不执行循环体中的代码

60629dd409d96fbd09000500.png 语法

do {
  需要执行的代码;
}while (条件)

运行流程 60629e5f09b9360906250502.png

例子

var i = 11;
do {
  console.log(i)
  i++
}
while (i <= 10)

60629ed309e8c0aa10490205.png 执行过程分析:

变量的初始值是11，它是小于10的，但是循环还是会先执行一次代码语句，在控制台中输出了11，然后再去判断条件是否成立。很显然11<=10是错误的，所以退出了循环。

小结 60629f1f09e48a6e05640507.png

算法

算法(Algorithm)是指解题方案的准确而完整的描述，是一系列解决问题的清晰指令，算法代表着用系统的方法描述解决问题的策略机制。也就是说，能够对一定规范的输入，在有限时间内获得所要求的输出。

  • 算法就是把一个问题，拆解为计算机能够一步一步执行的步骤。
  • 计算机的流程控制语句: 顺序执行、选择语句、循环语句

优秀算法的要求：

  • 正确性
  • 健壮性
  • 可读性

累加器 累乘器

image.png

累加器题目

image.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>
</head>

<body>
    <script>
        var n = Number(prompt('请输入数字'));
        var sum = 0;
        for (var i = 2; i <= n; i++) {
            sum += (i + 1) / i;
        }
        console.log(sum);
    </script>
</body>

</html>

累乘器题目

image.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>
</head>

<body>
    <script>
        var n = Number(prompt('请输入数字'));
        var ret = 1;
        for (var i = 1; i <= n; i++) {
            ret *= i;
        }
        console.log(ret);
    </script>
</body>

</html>

大厂前端面试题

image.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>
</head>

<body>
    <script>
        var n = Number(prompt('请输入需要估算的圆周率n'));
        var items = 1;
        var sum = 0;
        for (var i = 1; i <= n; i++) {
            items *= i / (2 * i + 1);   // 将每一项累乘在一起
            sum += items;   // 将每一项相乘的结果累加在一起
        }
        console.log((sum + 1) * 2);
    </script>
</body>

</html>

编程练习

小伙伴们，让我们编写代码，实现1+1/2+2/3+3/4+4/5...n-1/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>
</head>

<body>
    <script>
        var n = Number(prompt('请输入一个数'));
        var sum = 0;
        for (var i = 2; i <= n; i++) {
            sum += (i - 1) / i;
        }
        alert(sum + 1);
    </script>
</body>

</html>

image.png

image.png

穷举法

计算机最突出的能力就是计算，它没有归纳总结、逻辑推理的能力。所以人们使用计算机解决问题的时候，要“扬长避短”—充分发挥计算机的计算优势，而不要让它进行逻辑推理。穷举法就是这样的一种算法思想。

穷举法，顾名思义，是指根据题目的条件确定答案的大致范围，并在此范围内对所有可能的情况逐一验证，直到全部情况验证完毕。若某个情况符合题目的条件，则为本问题的一个解;若全部情况验证后都不符合题目的条件，则本题无解。

image.png

image.png

for(var i = 1; i <= 100; i++){
    if(i % 3 == 0 && i % 5 == 0){ 
        console.log(i); 
    } 
}

例题

image.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>
</head>

<body>
    <script>
        var n = Number(prompt('请输入一个数'));
        for (var i = 1; i <= n; i++) {
            if (n % i == 0) {
                console.log(i);
            }
        }
    </script>
</body>

</html>

寻找水仙花数

image.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>
</head>

<body>
    <script>
        for (var i = 100; i <= 999; i++) {
            var g = i % 10;
            var s = parseInt((i / 10) % 10);
            var b = parseInt(i / 100);
            if (Math.pow(g, 3) + Math.pow(s, 3) + Math.pow(b, 3) == i) {
                console.log(i);
            }
        }
    </script>
</body>

</html>

image.png

编程练习

上学的时候我们都玩过一个报数的游戏，游戏的规则是:定一个地雷数字，大家轮流报数。如果报到的数字是包含地雷数字，或者能被地雷数字整除，那么就算是踩地雷了。踩到地雷的人会被惩罚表演一个节目哦~ 现在我们定义7为地雷，找出100以内的安全数字。

<!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 <= 100; i++) {
            if (i % 7 == 0 || i % 10 == 7 || parseInt((i / 10) % 10) == 7 || parseInt(i / 100) == 7) {
                continue;
            } else {
                console.log(i);
            }
        }
    </script>
</body>

</html>

综合算法题目

寻找质数

image.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>
</head>

<body>
    <script>
        outer: for (var i = 2; i <= 100; i++) {
            for (var j = 2; j < i; j++) {
                if (i % j == 0) {
                    continue outer;
                }
            }
            console.log(i);
        }
    </script>
</body>

</html>

image.png

稚兔同笼

image.png 方法1

<!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 <= 35; i++) {
            for (var j = 1; j <= 35; j++) {
                if (i + j == 35 && 2 * i + 4 * j == 94) {
                    console.log('鸡有' + i + ',兔有' + j);
                }
            }
        }
    </script>
</body>

</html>

image.png 方法2

<!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 = 0; i <= 35; i++) {
            var j = 35 - i;
            if (2 * i + 4 * j == 94) {
                console.log(i, j);
            }
        }

    </script>
</body>

</html>

5fe18a380a602ae112000200.gif

avatar
文章
阅读
粉丝