非零基础自学前端最后一遍二 JavaScript基础 5 JavaScript分支语句 5.5 if-else if-else语句的使用

﹏ヽ暗。殇╰゛Y 2024-03-25 23:00 59阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  二 JavaScript基础
         *  5 JavaScript分支语句
         *   *  5.5 if-else if-else语句的使用
             *   *  5.5.1 多分支结构： if.. else if.. else..

![在这里插入图片描述][af3841280a8a43a38988354726a5f0e1.png_pic_center]

#### 二 JavaScript基础 ####

#### 5 JavaScript分支语句 ####

##### 5.5 if-else if-else语句的使用 #####

###### 5.5.1 多分支结构： if… else if… else… ######

*  多分支结构： if… else if… else…
    
     *  有时我们需要判断多个条件；
     *  我们可以通过使用 else if 子句实现；
    
    ![在这里插入图片描述][1369db7164d04afc97660c3bbc430da7.png_pic_center]
 *  案例: 分数评级：
    
     *  考试分数大于90：优秀
     *  大于80小于等于90：良好
     *  大于60小于等于80：合格
     *  小于60分：不及格

<!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>
    
        // 案例: score评级
        // 1.获取用户输入的分数
        var score = prompt("请输入您的分数:")
        score = Number(score)
    
        // 2.判断等级
        // 使用if else的方式来实现
        // if (score > 90) {
          
        //   alert("您的评级是优秀!")
        // } else {
          
        //   if (score > 80) {
          
        //     alert("您的评级是良好!")
        //   } else {
          
        //   }
        // }
    
        // edge case
        // if (score > 100 || score < 0) {
          
        //   alert("您输入的分数超过了正常范围")
        // } 
    
        if (score > 90) {
          
          alert("您的评级是优秀!")
        } else if (score > 80) {
          
          alert("您的评级是良好!")
        } else if (score >= 60) {
          
          alert("您的评级是合格!")
        } else {
          
          alert("不及格!!!")
        }
    
      </script>
    
    </body>
    
    </html>

渲染结果

![在这里插入图片描述][48cda090d04b4fc599bb0551052f9684.png_pic_center]

[af3841280a8a43a38988354726a5f0e1.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/0de858448c8d4e589c288422fd5ce76d.png
[1369db7164d04afc97660c3bbc430da7.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c88c209f414e4be9be657fae3bcf7678.png
[48cda090d04b4fc599bb0551052f9684.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/17469f6a3b9648dbbf9624999771b9b6.png