js 之语句：if\switch分支、运算符、while/for循环（案例集）

linsir 一啵叶

已于 2023-06-11 17:06:58 修改

阅读量553

点赞数 2

文章标签： javascript 前端开发语言

于 2023-06-10 17:07:20 首次发布

本文链接：https://blog.csdn.net/qq_53165476/article/details/131138590

版权

文章通过一系列JavaScript代码示例，展示了如何使用if...else、switch语句进行条件控制，以及如何运用三元运算符和不同类型的循环（for、while）处理各种编程场景，如判断闰年、找到最大值、数字补零、计算器功能、ATM模拟、数组遍历和图形打印等。

摘要由CSDN通过智能技术生成

分支分为：单、双、多

当分支比较少时，if...else语句执行效率高

当分支比较多（或值比较确定）时，switch语句执行效率高，且结构更清晰

1、if 双分支案例（双分支即两个选择）

需求：用户输入，用户名:linsir、密码:123456，则提示登入成功，否则提示失败

     let uname = prompt('请输入你的名字：')
        let pwd = prompt('请输入密码：')
        if (uname === 'linsir' && pwd === '123456') {
            alert('恭喜登入成功')
        } else {
            alert('用户名或密码错误')
        }

2、判断闰年案例（if语句与逻辑运算符）

需求：让用户输入年份，判断这一年使闰年还是平年并弹出对应的警示框

 let year = +prompt('请输入年份')
        if(year % 4 ===0 && year % 100 !== 0 || year % 400 === 0) {
            alert(`${year}年是闰年`)
        } else {
            alert(`${year}年是平年`)
        }

3、判断max值（三元运算符）

需求：用户输入2个数，弹出最大的值

 let num1 = +prompt('请您输入第一个数：')
        let num2 = +prompt('请您输入第二个数：')
        num1 > num2 ? alert(`最大值是：${num1}`) : alert(`最大值是：${num2}`)

4、数字补0案例（三元运算符）

需求：用户输入1个数，如果数字小于10，则前面进行补0，比如 02、09等

  let num3 = prompt('请您输入一个数：')
        num3 = num3 <10 ? 0 + num3 : num3  //这里的num3 是字符串，没有转换成数字
        alert(num3)

5、简单计算器（switch语句）

需求：用户输入2个数，然后输入+ - * / 任何一个，可以计算结果

  let num5 = +prompt('请您输入第一个数')
        let num6 = +prompt('请您输入第二个数')
        let sp = prompt('请输入运算符 * - + / 其中一个')
        switch (sp) {
            case '+':
                alert(`两个数的加法操作是${num5 + num6}`)
                break
            case '-':
                alert(`两个数的减法操作是${num5 - num6}`)
                break
            case '*':
                alert(`两个数的乘法操作是${num5 * num6}`)
                break
            case '/':
                if (num5 === 0 && sp === '/') {
                    alert('分母不能为0')
                } else {
                    alert(`两个数的除法操作是${num5 / num6}`)
                }
                break
            default:
                alert('输入错误运算符，请重新输入')
        }

break：退出循环

continue：结束本次循环，继续下次循环

for循环的最大价值：循环数组

6、页面弹框（循环）

需求：页面弹出对话框，‘今年是哪一年？’，如果输入‘2023’，则结束，否则一直弹出对话框

 while (true) {
      let str = prompt('今年是哪一年？')
      if (str === '2023' || str === '2023年') {
        break
      }
    }

7、简易 ATM 提款机案例（循环与分支）

需求：用户可以选择存钱、取钱、查看余额和退出功能，直到选择退出，否则一直弹出对话框

弹出内容如下：

请你选择(输出选项数字)：
1、存钱
2、取钱
3、查看余额
4、退出

 let money = 100    //准备一个金额
    while (true) {    //开始循环 输入框写到循环里
      let re = +prompt(`
            请你选择(输出选项数字)：
            1、存钱
            2、取钱
            3、查看余额
            4、退出
            `)
      if (re === 4) {  // 如果用户输入 4 则退出循环
          break
      }
      switch (re) { //根据输入做操作
        case 1:
          let cun = +prompt('请输入存钱金额')
          money += cun
          break
        case 2:
          let qu = +prompt('请输入取钱金额')
          money = money - qu
          break
        case 3:
          alert(`您的银行卡余额是${money}`)
          break
        default:
          alert('请重新输入正确的选项数字')
      }
    }

8、循环数组（for循环）

需求：遍历数组，从第一个循环到最后一个

  let arr = ['王一博','赵丽颖','关晓彤','linsir','肖战']
        for (let i = 0; i <arr.length; i++ ){  
            document.write(arr[i])       
        }

9、嵌套循环（for语句）

1）需求：自定义选择行列数

 let row = +prompt('请输入行数')
    let col = +prompt('请输入列数')
    for (let i = 1; i <= row; i++) {      // 外层循环打印行数
      for (let j = 1; j <= col; j++) {     // 里层循环打印几个符号
        document.write('❤️')
      }
      document.write('<br>')      // 进行换行显示
    }

2）需求：打印一个直角三角形

 for (let i = 1; i <= 5; i++) {
      for (let j = 1; j <= i; j++) {
        document.write('❤️')
      }
      document.write('<br>')
    }

3）需求：打印一个等腰三角形

 for (let i = 1; i <= 3; i++) {
      // 打印空格
      for (let j = 1; j <= 3 - i; j++) {
        document.write('&nbsp;')
      }
      // 打印字符
      for (let j = 1; j <= 2 * i - 1; j++) {
        document.write('*')
      }
      document.write('<br>')
    }

10、99乘法表（for嵌套循环）

 <style>
        span {
            display: inline-block;
            width: 100px;
            padding: 5px 10px;
            border: 1px solid green;
            margin: 2px;
            /* 给盒子加小圆角 */
            border-radius: 5px;
            /* 给盒子加阴影色 */
            box-shadow: 2px 2px 2px rgb(255, 192, 203, .4);
            background-color: rgb(255, 192, 203, .1);
            text-align: center;
            color: green;
        }
    </style>
</head>
<body>
    <script>
        // 声明(封装)sheet99() 函数
        function sheet99() {
            for (let i = 1; i <= 9; i++) {
                for (let j = 1; j <= i; j++) {
                    document.write(`<span>${j}*${i} = ${i * j}</span>`)
                }
                document.write('<br>')
            }
        }
        // 调用函数
        sheet99()
        document.write(`<br>`)
        //复制多份相同的乘法表
        sheet99()
        document.write(`<br>`)
        sheet99()
    </script>
</body>

11、简单柱状图（for循环、数组）

需求：用户输入每个季度的数据，打印出相应的柱状图

 * {
            margin: 0;
            padding: 0;
        }

        .box {
            /* flex布局(弹性布局) */
            display: flex;
            width: 700px;
            height: 300px;
            border-left: 1px solid pink;
            border-bottom: 1px solid pink;
            margin: 50px auto;
            /* 设置主轴上的子元素排列方式  平分剩余空间 */
            justify-content: space-around;
            /* 设置侧轴上的子元素排列方式（单行） 底部对齐*/
            align-items: flex-end;
            text-align: center;
        }

        .box>div {
            display: flex;
            width: 50px;
            background-color: pink;
            /* 设置主轴的方向  从上到下*/
            flex-direction: column;
            /* 设置主轴上的子元素排列方式   先两边贴再平分剩余空间  */
            justify-content: space-between;
        }

        .box div span {
            margin-top: -20px;
        }

        .box div h4 {
            margin-bottom: -35px;
            width: 70px;
            margin-left: -10px;
        }
    </style>
</head>
<body>
    <script>
        // 四次弹框效果
        let arr = []
        for (let i = 1; i <= 4; i++) {
            arr.push(prompt(`请输入第${i}季度的数据`)) 
                 //可以不用转换成整型，后面用到px，可字符串拼接 
        }
        // 盒子
        document.write(` <div class="box">`)
        // 盒子中间用循环的形式  与数组有关
        for (let i = 0; i < arr.length; i++) {
            document.write(`
        <div style="height: ${arr[i]}px;">
            <span>${arr[i]}</span>
            <h4>第${i + 1}季度</h4>
        </div>
                 `)
        }
        document.write(` </div>`)
    </script>
</body>