JavaScript中的循环与条件判断应用

时间：02-05来源：作者：点击数：21

前言

本文将通过一系列具体的JavaScript代码片段，深入探讨如何使用for、while、do-while循环以及if-else、switch语句来实现各种功能。这些示例不仅展示了基本的控制结构，还帮助读者理解如何结合用户输入、数学运算和逻辑判断来构建交互式网页应用。

1. 输出1~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>
        /*
        输出1~100的奇数
        输出: alert() document.write() console.log()
        1~100 : 重复  循环  三要素： i = 1   i < 101   i ++   (i += 2)
        奇数: 不能被2整除  一个条件  一个结果  单分支 if(){}
        */
        var i = 1, str = '';
        do{
            if(i % 2){
                str += i + ' ';
            }
            i++;
        } while(i < 101);
        document.write(str);

        document.write('<br>');
        for(var i = 1, str = ''; i < 101; i += 2){
            str += i + ',';
        }
        document.write(str);
    </script>
</body>
</html>

代码解析

这段代码实现了输出1到100之间的所有奇数。以下是代码的主要部分及其解释：

初始化变量：
- var i = 1, str = '';：初始化计数器i为1，用于遍历1到100的数字，并初始化空字符串str用于存储结果。
使用do-while循环：
- do{ ... } while(i < 101);：先执行一次循环体，然后检查条件是否满足。
- 在循环体内，使用if(i % 2)判断当前数字是否为奇数，如果是，则将其添加到str中。
- 每次循环后，i++递增计数器。
使用for循环：
- for(var i = 1, str = ''; i < 101; i += 2)：从1开始，每次递增2，直接跳过偶数。
- 将每个奇数添加到str中，并用逗号分隔。
输出结果：
- 使用document.write将结果输出到页面上。

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>
        /*
        任意输入一个数字，判断是星期几？
        数字
        7个条件，每一个条件对应一个结果
        */
        //1. 准备一个变量
        var i = parseInt(prompt('请输入一个1~7中的整数：'));
        //2. 根据这个整数进行判断
        switch(i){
            case 1 : console.log('星期一'); break;
            case 2 : console.log('星期二'); break;
            case 3 : console.log('星期三'); break;
            case 4 : console.log('星期四'); break;
            case 5 : console.log('星期五'); break;
            case 6 : console.log('星期六'); break;
            case 7 : console.log('星期日'); break;
            default : console.log('输入错误!');
        }
    </script>
</body>
</html>

代码解析

这段代码用于根据用户输入的数字判断对应的星期几。以下是代码的主要部分及其解释：

准备变量：
- var i = parseInt(prompt('请输入一个1~7中的整数：'));：提示用户输入一个1到7之间的整数，并将其转换为整数类型。
使用switch语句：
- switch(i){ ... }：根据用户输入的数字选择相应的分支。
- 每个case对应一个特定的星期几，如果匹配则输出相应结果。
- 如果没有匹配任何case，则执行default分支，提示用户输入错误。

3. 判断工作日与休息日

代码片段

<!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>
        /*
        输入一个0-6的整数，判断哪一天是工作日，哪一天是休息日？
        输入一个0-6的整数 prompt() parseInt()
        工作日:  1 2 3 4 5
        休息日： 6 7
        */
       //1. 准备一个变量
       var i = parseInt(prompt('请输入0~6中的整数：'));
       //2. 根据这个整数进行判断
       switch(i){
            case 1 : 
            case 2 : 
            case 3 : 
            case 4 : 
            case 5 : console.log('工作日'); break;
            case 6 : 
            case 0 : console.log('休息日'); break;
            default : console.log('末日'); break;
       }
    </script>
</body>
</html>

代码解析

这段代码用于根据用户输入的数字判断是工作日还是休息日。以下是代码的主要部分及其解释：

准备变量：
- var i = parseInt(prompt('请输入0~6中的整数：'));：提示用户输入一个0到6之间的整数，并将其转换为整数类型。
使用switch语句：
- switch(i){ ... }：根据用户输入的数字选择相应的分支。
- 使用多个case合并处理相同的结果（如工作日和休息日）。
- 如果没有匹配任何case，则执行default分支，提示用户输入错误。

4. 判断月份天数

代码片段

<!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>
        /*
        输入一个月份，输出这个月有多少天？
        一个月份 : prompt() parseInt()
        1  3  5  7 8 10  12   (31)
        4  6 9  11   (30)
        2  闰年（29）  平年（28）
        */
        //1.  准备一个变量
        var i_month = parseInt(prompt('请输入一个月份：'));
        //2. 根据月份进行判断
        switch(i_month){
            case 1 : 
            case 3 : 
            case 5 : 
            case 7 : 
            case 8 : 
            case 10 : 
            case 12 : alert('31天');break;
            case 4 : 
            case 6 : 
            case 9 : 
            case 11 : alert('30天'); break;
            case 2 :   
                //准备变量，接收年份
                var i_year = parseInt(prompt('请输入一个年份：'));
                alert(!(i_year % 4) && i_year % 100 || !(i_year % 400) ? '29天' : '28天');
        }
    </script>
</body>
</html>

代码解析

这段代码用于根据用户输入的月份判断该月有多少天。以下是代码的主要部分及其解释：

准备变量：
- var i_month = parseInt(prompt('请输入一个月份：'));：提示用户输入一个月份，并将其转换为整数类型。
使用switch语句：
- switch(i_month){ ... }：根据用户输入的月份选择相应的分支。
- 对于1、3、5、7、8、10、12月，输出31天。
- 对于4、6、9、11月，输出30天。
- 对于2月，进一步提示用户输入年份以判断是否为闰年，并输出28或29天。

5. 成绩等级判断

代码片段

<!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>
        /*
        判断成绩优(90-100)良(80-89)中(70-79)差(60-69)不及格(<60)
        成绩 : prompt()  parseInt()
                                        10 优
        90-100 : 90  91  92  93  99     9  优
        80-89:   80  81  82  83  89     8  良
        70-79:   70 ~79                 7  中
        60-69:   60 61  69              6  差
        <60:     

        多分支
        */
        //1. 准备一个变量
        var score = parseInt(prompt('请输入一个成绩：'));
        //2. 根据成绩进行判断
        if(score < 0 || score > 100){
            alert('一边儿玩去！');
        }else{
           switch(parseInt(score / 10)){
                case 10 : 
                case 9 : alert('优'); break;
                case 8 : alert('良'); break;
                case 7 : alert('中'); break;
                case 6 : alert('差'); break;
                default : alert('不及格');
           }
        }
    </script>
</body>
</html>

代码解析

这段代码用于根据用户输入的成绩判断其对应的等级。以下是代码的主要部分及其解释：

准备变量：
- var score = parseInt(prompt('请输入一个成绩：'));：提示用户输入成绩，并将其转换为整数类型。
根据成绩进行判断：
- 使用嵌套的if-else和switch结构判断成绩范围，并输出相应的等级。
- 如果成绩不在0到100之间，则提示用户输入有效成绩。

6. 计算某日是该年的第几天

代码片段

<!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. 需要哪些变量？
         年  月   日

         根据月份
         从当前月份的之前月份开始加
         2022、11、30
         10 + 9 + 8 + 7 + 6 + 5 + 4 + 3 + 2 + 1 + 日
         2022、3、1
         2 + 1 + 日
        */
        //1. 准备变量
        //1.1 年
        var year = parseInt(prompt('请输入一个年份：'));
        //1.2 月
        var month = parseInt(prompt('请输入一个月份：'));
        //1.3 日
        var date = parseInt(prompt('请输入日：'));
        //1.4 总天数
        var sum = 0;
        //2. 根据月份判断 （从当前月的 ***前面*** 所有月份天数的和）
        switch(month){  // 12月20日 
            case 12 : sum += 30;  //(30是11月份的天数) sum = 0 + 30  30
            case 11 : sum += 31; //(31是10月份的天数)  sum = 30 + 31
            case 10 : sum += 30;  //(30是9月份的天数) sum = 61 + 30
            case 9 : sum += 31;   // sum = 91 + 31
            case 8 : sum += 31;   // sum = 122 + 31
            case 7 : sum += 30;   // sum = 153 + 30
            case 6 : sum += 31;  // sum = 183 + 31
            case 5 : sum += 30;  // sum = 214 + 30
            case 4 : sum += 31;  // sum = 244 + 31
            case 3 : sum += !(year % 4) && year % 100 || !(year % 400) ? 29 : 28;      // sum = 275 + 28
            case 2 : sum += 31;  // sum = 303 + 31
            case 1 : sum += date; // sum = 334 + 20  sum = 354
        }
        //3. 输出结果
        alert(year + '年' + month + '月' + date + '日是' + year + '年中的第' + sum + '天');
    </script>
</body>
</html>

代码解析

这段代码用于计算某日是该年的第几天。以下是代码的主要部分及其解释：

准备变量：
- var year = parseInt(prompt('请输入一个年份：'));：提示用户输入年份。
- var month = parseInt(prompt('请输入一个月份：'));：提示用户输入月份。
- var date = parseInt(prompt('请输入日：'));：提示用户输入日期。
- var sum = 0;：初始化总天数为0。
根据月份累加天数：
- 使用switch语句从当前月份往前累加每个月的天数。
- 特别处理2月，判断是否为闰年并调整天数。
输出结果：
- 使用alert弹出对话框显示计算结果。

7. 血型与性别测试性格

代码片段

<!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>
        /*
        根据血型与性别测试性格
        血型: A  B  AB  O    多条件  多结果  多分支
        性别: 男  女         多条件   多结果  多分支
        */
        //1. 准备两个变量
        //1.1 血型
        var blood = prompt('请输入您的血型：');
        //1.2 性别
        var gender = prompt('请输入您的性别：');
        //2. 根据性别进行判断
        switch(gender){
            case '男' : 
                switch(blood){
                    case 'A' : alert('细心'); break;
                    case 'B' : alert('花心'); break;
                    case 'AB' : alert('极端'); break;
                    case 'O' : alert('软弱'); break;
                    default : alert('您可能是熊猫血！');
                }
                break;
            case '女' : 
                switch(blood){
                    case 'A' : alert('xxxx'); break;
                    case 'B' : alert('yyyy'); break;
                    case 'AB' : alert('zzzz'); break;
                    case 'O' : alert('好'); break;
                    default : alert('您可能是熊猫血');
                }
                break;
            default: alert('您可能来自泰国！');
        }
    </script>
</body>
</html>

代码解析

这段代码用于根据用户的血型和性别测试性格。以下是代码的主要部分及其解释：

准备变量：
- var blood = prompt('请输入您的血型：');：提示用户输入血型。
- var gender = prompt('请输入您的性别：');：提示用户输入性别。
根据性别进行判断：
- 使用switch语句根据用户输入的性别选择相应的分支。
- 对于男性（case '男'），进一步使用switch语句根据血型选择相应的性格描述。
- 对于女性（case '女'），同样使用switch语句根据血型选择相应的性格描述。
- 如果输入的性别既不是“男”也不是“女”，则执行default分支，提示用户可能来自泰国。
根据血型进行判断：
- 对于男性，不同的血型对应不同的性格描述：
  - case 'A'：细心
  - case 'B'：花心
  - case 'AB'：极端
  - case 'O'：软弱
  - default：您可能是熊猫血！
- 对于女性，不同的血型对应不同的性格描述：
  - case 'A'：xxxx
  - case 'B'：yyyy
  - case 'AB'：zzzz
  - case 'O'：好
  - default：您可能是熊猫血

方便获取更多学习、工作、生活信息请关注本站微信公众号 城东书院微信服务号

来顶一下

返回首页

上一篇:Javascript-动态操作DOM元素与浏览器行为下一篇:JavaScript逻辑与控制结构应用

Grid-A-Licious 基于	使用Windows API实现
如何快速了解一个行业	InDesign入门教程\|半