⭐️ 有关JavaScript- 流程控制小练习


>if-else语句练习

prompt() 可以用来获取用户输入的内容
//它会将用户输入的内容以字符串的形式返回,可以通过变量来接收

parseInt()将一个字符串转换为一个整数
//它会自左向右读取一个字符串,直到读取到字符串中所有的有效的整数

  • 练习1:

编写一个程序,获取一个用户输入的整数。通过程序显示这个数是奇数还是偶数。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if-else练习1</title>
    <script>

        // 编写一段指令,并获取一个用户输入的整数
         let num = +prompt("请输入一个整数")
        
        // 使用 parseInt来对数字取整   
        // let num = parseInt(prompt("请输入一个整数"))

        // 验证一下,用户的输入是否合法,只有是有效数字时候,才检查是否为偶数
        // 注意,这不能使用 ==相等运算符 或 ===全等运算符 来检查一个值是否为 NaN
        // 可以使用 isNaN()函数来检查一个值是否为 NaN
		// 如果为 NaN ,则不执行后续操作,||或 数字模以1 !==不全等 为0,则不执行后续操作
        if (isNaN(num) || num % 1 !== 0) {
            alert("你的输入有问题,请输入整数!")
        } else {
            // 通过这一段指令,显示这个数是基数还是偶数
            // 在这里使用 % 模运算符 
            if (num % 2 === 0){
            alert(`${num} 是偶数!` )
            }else{
            alert(`${num} 是奇数!`)
            }
        }
        // 可以通过嵌套关系,使其返回 NaN 重新操作!
    </script>
</head>
<body>
    
</body>
</html>
  • 练习2:

从键盘输入小明的期末成绩:

当成绩为100时

'奖励一辆BMW'

当成绩为[80-99]时

'奖励一台iphone'

当成绩为[60-79]时

'奖励一本参考书'

其他时

什么奖励也没有

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if-else练习2</title>
    <script>

        // 从键盘输入小明的期末成绩:
        // 这里使用 score得分 来赋值
        let score = +prompt("请输入小明的期末成绩")

        // 检查score是否合法
        // score必须为数字,或 小于0 或 大于100
        if(isNaN(score) || score<0 || score>100 ){
            alert( `请输入一个合法的分数`)
        }else{
                // 当成绩为100时,奖励一辆BMW
                // 使用 ===全等运算符 比较分数是否相等
            if(score === 100){
                alert(`奖励BMW一辆`)
            }else if(score >=80){
                // 当成绩为[80-99]时,奖励一台iPhone
                // 分数大于且等于80,区间上限为99
                alert(`手机一台`)
            }else if(score >= 60){
                // 当成绩为[60-79]时,奖励一本参考书
                alert(`奖励参考书一本`)
            }else{
                // 其他时,什么奖励也没有
                // 不在以上区间时,执行最后一步
                alert(`什么也没有`)
            }
       	}
    </script>
</head>
<body>
    
</body>
</html>
  • 练习3:

大家都知道,男大当婚,女大当嫁。那么女方家长要嫁女儿,当然要提出一定的条件:

高:180cm以上; 富:1000万以上; 帅:500以上;

如果这三个条件同时满足

'我一定要嫁给他'

如果三个条件有为真的情况

'嫁吧,比上不足,比下有余。'

如果三个条件都不满足

'不嫁!'

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>if-else练习3:</title>
    <script>

        // 获取男生的数据(身高、财富、颜值)
        let height = +prompt(`请输入你的身高(厘米)`)
        let money = +prompt(`请输入你的身价(万)`)
        let face = +prompt(`请输入你的颜值(像素)`)
        
        // 检查输入是否为有效数字
        // 如果失败则提示重新输入,验证成功则显示用户数据
        if (isNaN(height)|| isNaN(money) || isNaN(face)) {
            alert("请输入有效数字!")
        }else {
            // 显示用户输入数据
            // 在这里`--`为连接符
            alert(height + `--`+ money + `--`+ face)
        }if(height>180 && money>1000 && face>500) {
            alert(`我一定要嫁给他!!!`)
        }else if(height>180 || money>1000 || face>500) {
            alert(`嫁吧,比上不足,比下有余~`)
        }else {
            alert(`不嫁!`)
        }
    </script>
</head>
<body>
    
</body>
</html>

>while语句练习

  • 练习1:

假设银行存款的年利率为5%,问1000块存多少年可以变成5000块

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>while练习1</title>
    <script>
        // 创建一个变量表示钱数
        let money = 1000
        // 1000存一年是多少钱?
        /* 需要赋值给 money 以便更新
            money = money * 0.05 + money
            money *= 1.05 
        */

        // 创建一个计数器来记录循环执行的次数
        let year = 0

        // 编写循环,计算存款的年数
        while(money < 5000){
            money *= 1.05 // 循环每执行一次,就相当于存了一年
            year++
        }
        
        console.log(`需要存${year}年,最终的钱数是${money})元!`);
    </script>
</head>
<body>
    
</body>
</html>

>for语句练习

  • 练习1:

求100以内所有3的倍数(求它们个数和总和)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>for语句练习1</title>
    <script>
        // 求100以内所有3的倍数(求它们个数和总和)
        let count = 0 // 计数器
        let result = 0 // 用来存储计算结果(累加结果)

        // 求100以内所有的数
        // for(let i=1; i<=100; i++){

        // 获取3的倍数
        //	  if(i % 3 === 0){
        // 	  count++
		//    resule = result + i
		// 更棒的简写方法:
        //    result += i 
        //    }
        // }

        for(let i=3; i<=100; i+=3){
            count++
            result += i
        }
        
        console.log(`3的倍数一共有${count}个,总和为${result}`)
    </script>
</head>
<body>
    
</body>
</html>
  • 练习2:

求 1000 以内的水仙花数

一个n位数(n >= 3),如果它各个位上数字的n次幂之和还等于这个数,那么这个数就是一个水仙花数

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>for语句练习2</title>
    <script>
        // 第一种思路:
        // 获取所有的三位数
        for(let i=100; i<1000; i++){
            // 判断i是否是水仙花
            // 如果i的百位数字 十位数字 个位数字的立方和 还等于i,则i就是水仙花数
            let bai = parseInt(i / 100)

            // 获取一个十位数
            let shi =parseInt((i- bai * 100)/ 10) 

            // 获取一个个位数
            let ge = i % 10

            console.log(i,"-->",bai,shi,ge);

            // 判断i是否是水仙花数
            if(bai**3 + shi**3 + ge**3 === i) 
                console.log(i);
        }

        // 第二种思路:
        // 通过索引去操作字符:
        /*  let a = `hello`
            a[0] = h
            a[1] = e
            a[2] = l
            a[3] = l
            a[4] = 0
        */ 

        for(let i=100; i<1000; i++){
            // 创建新的变量strI,防覆写i
            let strI = i + ""
            if(strI[0] ** 3 + strI[1] ** 3 + strI[2] ** 3 === i){
                console.log(i)
            }
        }
    

    </script>
</head>
<body>
    
</body>
</html>
  • 练习3:

获取用户输入的大于1的整数(暂时不考虑输错的情况)

然后编写代码检查这个数字是否是质数,并打印结果

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>for语句练习3</title>
    <script>
        // 获取用户输入的数值
        let num = +prompt(`请输入一个大于1的整数!`)

        // 编写代码检查 9是否为质数
        /* 检查num有没有除1和9以外的其它因数
              -如果有,说明num不是质数
              -如果没有,说明num是质数

           获取所有可能整数9的数(1-9)
                2 3 4 5 6 7 8 9 

           检查这一堆数中是否有能整除9的数

            let flag = true

            for(let i=2; i<9; i++){
                    if(9 % i ===0){
                        // 如果9能够被i整除,说明9一定不是质数
                        // 当循环执行时,如果代码没有执行,则说明9是质数,反之则一定不是。
                        flag = false
                    }
            }
            
            if(flag){
                    alert(`9是质数`)
            }else{
                    alert(`9不是质数`)
            }
        */

        // 创建变量,用来记录num的状态,默认是true,num是质数。
        let flag = true

        for(let i=2; i<num; i++){
            if(num % i ===0){
                // 如果num能够被i整除,说明num一定不是质数
                // 当循环执行时,如果代码没有执行,则说明num是质数,反之则一定不是。
                flag = false
            }
        }

        if(flag){
            alert(`${num}是质数`)
        }else{
            alert(`${num}不是质数`)
        }
    </script>
</head> 
<body>
    
</body>
</html>

>嵌套循环练习

  • 练习1:

在网页中打印99乘法表

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套练习1</title>
    <script>
         // 创建一个外层循环,控制图形高度
         for (let i = 1; i <= 9; i++) {
         // 创建内层循环控制图形的宽度
         	for (let j = 1; j < i + 1; j++) {
                document.write(`<span>${j} × ${i} = ${i*j}</span>`)
            }
         // 打印换行
            document.write("<br>")
         }
    </script>
</head>
<body>
    
</body>
</html>
  • 练习2:

编写代码,求100以内所有的质数

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>嵌套练习2</title>
    <script>

        for(let i=2; i<100; i++){
           
        // 检查i是否是质数,是质数则输出
        // 创建一个变量,记录i的状态,默认i是质数
           let flag = true

            // 获取 1-i 之间的数
            for(let j=2; j<i; j++){
            // 判断i能不能被j整除
               if(i % j === 0){
                   // 进入判断,说明i不是质数,修改flag为false
                   flag = false
               }
           }

           // 判断结果
           if(flag){
               console.log(i)
           }
       }
    </script>
</head>
<body>
    
</body>
</html>

>代码优化练习

第一次优化

<!DOCTYPE html>
<html lang="zh">
    <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>
        <script>
            /* 
                优化前
                    1. 10000以内:290ms
                    2. 100000以内:28202ms

                第一次优化:
                    1. 10000以内:30ms
                    2. 100000以内:2331ms

            
                问题:如何修改代码,提升其性能
            */

            // 开始一个计时器
            console.time('质数练习')

            for (let i = 2; i < 1000000; i++) {
                let flag = true

                for (let j = 2; j < i; j++) {
                    if (i % j === 0) {
                        flag = false
                        // 进入判断说明i一定不是质数,后续检查没有执行的必要
                        break
                    }
                }

                if (flag) {
                    //console.log(i)
                }
            }

            // 停止计时器
            console.timeEnd('质数练习')
        </script>
    </head>
    <body></body>
</html>

第二次优化

<!DOCTYPE html>
<html lang="zh">
    <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>
        <script>
            /* 
                优化前
                    1. 10000以内:290ms
                    2. 100000以内:28202ms

                第一次优化:
                    1. 10000以内:30ms
                    2. 100000以内:2331ms
                    3. 1000000以内:192003ms

                第二次优化:
                    1. 10000以内:3ms
                    2. 100000以内:20ms
                    3. 1000000以内:394ms
            
                问题:如何修改代码,提升其性能

                    36
                    1 36
                    2 18
                    3 12
                    4 9
                    6 6

            */

            // 开始一个计时器
            console.time('质数练习')

            for (let i = 2; i < 1000000; i++) {
                let flag = true

                for (let j = 2; j <= i ** .5; j++) {
                    if (i % j === 0) {
                        flag = false
                        // 进入判断说明i一定不是质数,后续检查没有执行的必要
                        break
                    }
                }

                if (flag) {
                    // console.log(i)
                }
            }

            // 停止计时器
            console.timeEnd('质数练习')
        </script>
    </head>
    <body></body>
</html>