JavaScript逻辑与控制结构应用

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

前言

本文中的所有示例代码均基于HTML和JavaScript，旨在帮助初学者理解如何构建交互式网页应用。每个代码片段都附有详细的解析，以帮助读者更好地理解其工作原理。

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>
        /*
        设计一个具有+、-、*、/、%的简单计算器
        准备变量：3个 第一个接收数字   第二个接收运算符  第三个接收数字  prompt() parseInt()
        根据运算符进行判断
        +、-、*、/、%   多条件 多结果  多分支
        */
        //1. 准备变量
        //1.1 第一个数字
        var i = parseInt(prompt('请输入第一个整数：'));
        //1.2 运算符
        var ch = prompt('请输入一个算术运算符:');
        //1.3 第二个数字
        var j = parseInt(prompt('请输入第二个整数：'));
        //2. 根据运算符进行判断
        if(ch === '+'){
            alert(i + '+' + j + '=' + (i + j));
        }else if(ch === '-'){
            alert(i + '-' + j + '=' + (i - j));
        }else if(ch === '*'){
            alert(i + '*' + j + '=' + i * j);
        }else if(ch === '/'){
            alert(j === 0 ? '除数不能为零!' : i + '/' + j + '=' + (i / j).toFixed(2));
        }else if(ch === '%'){
            alert(j === 0 ? '除数不能为零！' : i + '%' + j + '=' + i % j);
        }else{
            alert('请输入一个正确的算术运算符！');
        }
    </script>
</body>
</html>

代码解析

这段代码实现了一个简单的计算器，可以处理加法、减法、乘法、除法和取模运算。以下是代码的主要部分及其解释：

准备变量：
- var i = parseInt(prompt('请输入第一个整数：'));：提示用户输入第一个整数，并将其转换为整数类型。
- var ch = prompt('请输入一个算术运算符:');：提示用户输入运算符。
- var j = parseInt(prompt('请输入第二个整数：'));：提示用户输入第二个整数，并将其转换为整数类型。
根据运算符进行判断：
- 使用if-else if-else结构来判断用户输入的运算符，并执行相应的运算。
- 对于除法和取模运算，特别检查了除数是否为零，以避免出现除零错误。
- 如果用户输入了无效的运算符，则提示用户重新输入。

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>
        //根据成绩判断是否发放清华大学的通知书？
        /*
        成绩? prompt() parseInt()
        清华大学的通知书,前提条件？满足分数线？ 700
        成绩 >= 700
            通知书

        单分支
        */
        //1. 准备一个变量，接收一个成绩
        var i_score = parseInt(prompt('请输入一个成绩：'));
        //2. 判断成绩是否合格
        if( i_score >= 700 ){
            alert('祝贺你拿到清华大学的通知书！');
        }
    </script>
</body>
</html>

代码解析

这段代码用于判断用户输入的成绩是否达到某个分数线（例如700分），并根据结果决定是否发放清华大学的通知书。以下是代码的主要部分及其解释：

准备变量：
- var i_score = parseInt(prompt('请输入一个成绩：'));：提示用户输入成绩，并将其转换为整数类型。
判断成绩是否合格：
- 使用if语句判断成绩是否大于等于700分。
- 如果条件成立，则弹出对话框告知用户已获得通知书。

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>
        //输入任意两个数，然后交换位置输出（如：a=4,b=5输出a=5,b=4）
        /*
        输入任意两个数: prompt()  parseInt()
        交换位置: 需要一个空容器，进行交换
        */
        //1. 准备两个变量，接收两个整数：
        var a = parseInt(prompt('请输入一个整数：'));
        var b = parseInt(prompt('请输入一个整数：'));
        //输出一次未交换的数据
        console.log('交换前：\na=' + a + '\nb=' + b);
        //交换位置
        //准备一个空变量
        var t = a;
        a = b;
        b = t;
        //输出一次交换后的数据
        console.log('交换后：\na=' + a + '\nb=' + b);
    </script>
</body>
</html>

代码解析

这段代码实现了两个数的交换，并展示了交换前后的结果。以下是代码的主要部分及其解释：

准备变量：
- var a = parseInt(prompt('请输入一个整数：'));：提示用户输入第一个整数，并将其转换为整数类型。
- var b = parseInt(prompt('请输入一个整数：'));：提示用户输入第二个整数，并将其转换为整数类型。
交换位置：
- 使用一个临时变量t来保存第一个数的值。
- 将第二个数的值赋给第一个数。
- 最后将临时变量中的值赋给第二个数。
输出结果：
- 使用console.log输出交换前后的结果，以便用户查看。

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>
        //输入任意三个数，由大到小输出
        /*
        输入任意三个数? parInt() prompt()
        大到小输出(排序):判断
        两个数比较 a b c
        1. 确保 a 和 b 中的最大值放到 a中
            if(a < b){
                交换a 和 b 中的值
            }
        2. 确保a 和 c 中的最大值放到 a中
            if(a < c){
                交换a 和 c 中的值
            }
        3. 确保 b 和 c 中的最大值放到 b 中
            if(b < c){
                交换 b 和c中的值
            }
        */
        //1. 准备三个变量，接收数据
        var a = parseInt(prompt('请输入一个整数：'));
        var b = parseInt(prompt('请输入一个整数：'));
        var c = parseInt(prompt('请输入一个整数：'));
        //2. 确保 a 和 b 中的最大值放到 a中
        if(a < b){
            var t = a;
            a = b;
            b = t;
        }
        //3. 确保a 和 c 中的最大值放到 a中
        if(a < c){
            var t = a;
            a = c;
            c = t;
        }
        //4. 确保 b 和 c 中的最大值放到 b 中
        if(b < c){
            var t = b;
            b = c;
            c = t;
        }
        //5. 输出结果
        console.log(a,b,c);
    </script>
</body>
</html>

代码解析

这段代码实现了三个数的排序，并按从大到小的顺序输出。以下是代码的主要部分及其解释：

准备变量：
- var a = parseInt(prompt('请输入一个整数：'));：提示用户输入第一个整数，并将其转换为整数类型。
- var b = parseInt(prompt('请输入一个整数：'));：提示用户输入第二个整数，并将其转换为整数类型。
- var c = parseInt(prompt('请输入一个整数：'));：提示用户输入第三个整数，并将其转换为整数类型。
确保最大值：
- 使用多个if语句确保每次比较后，较大的数值总是被放在前面的变量中。
- 通过三次比较，确保a、b、c分别存储最大的、次大的和最小的数。
输出结果：
- 使用console.log输出排序后的结果，以便用户查看。

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>
        /*
        求两个数中的最大值？
        两个数? prompt() parseInt()
        最大值 一条件，两个结果，使用双分支

        */
        //1. 准备两个变量，接收数据
        var i = parseInt(prompt('请输入一个整数：'));
        var j = parseInt(prompt('请输入一个整数：'));
        //2. 选择语句（双分支）
        if( i > j ){
            alert(i);
        }else{
            alert(j);
        }
    </script>
</body>
</html>

代码解析

这段代码用于求两个数中的最大值，并输出结果。以下是代码的主要部分及其解释：

准备变量：
- var i = parseInt(prompt('请输入一个整数：'));：提示用户输入第一个整数，并将其转换为整数类型。
- var j = parseInt(prompt('请输入一个整数：'));：提示用户输入第二个整数，并将其转换为整数类型。
选择语句：
- 使用if-else结构判断两个数的大小。
- 如果第一个数大于第二个数，则输出第一个数；否则输出第二个数。

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>
        /*
        求三个数的最大值?
三个数? prompt() parseInt()
最大值? 两两比较最为简单  a b c 
1. 求出a和b中的最大值，放到一个新的变量中。max
2. 如果c > max,则将c的值存放到max中
        */
        //1. 准备变量
        var a = parseInt(prompt('请输入一个整数：'));
        var b = parseInt(prompt('请输入一个整数：'));
        var c = parseInt(prompt('请输入一个整数：'));
        //最大值
        var max;
        //2. 比较前两个数，求出最大值
        if(a > b){
            max = a;
        }else{ //否则
            max = b;
        }
        //3. 比较下一个数与max，求出最大值
        if(c > max){
            max = c;
        }
        //4. 输出结果
        alert('最大值是：' + max);
    </script>
</body>
</html>

代码解析

这段代码用于求三个数中的最大值，并输出结果。以下是代码的主要部分及其解释：

准备变量：
- var a = parseInt(prompt('请输入一个整数：'));：提示用户输入第一个整数，并将其转换为整数类型。
- var b = parseInt(prompt('请输入一个整数：'));：提示用户输入第二个整数，并将其转换为整数类型。
- var c = parseInt(prompt('请输入一个整数：'));：提示用户输入第三个整数，并将其转换为整数类型。
比较前两个数：
- 使用if-else结构比较前两个数，将较大的数存入max变量中。
比较第三个数：
- 再次使用if语句比较第三个数与当前的最大值max，更新最大值。
输出结果：
- 使用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>
        /*
        输入一个成绩，判断是升班还是重修
        成绩 prpmpt() parseInt()
        升班还是重修? 及格分数线：90
        一个条件 （成绩 >= 90）    ‘升班'  '重修'  双分支
        */
        //1. 准备一个变量
        var i_score = parseInt(prompt('请输入一个成绩：'));
        //2. 判断
        if( i_score >= 90 ){
            alert('升班');
        }else{
            alert('重修');
        }
    </script>
</body>
</html>

代码解析

这段代码用于根据用户输入的成绩判断学生是否升班或重修。以下是代码的主要部分及其解释：

准备变量：
- var i_score = parseInt(prompt('请输入一个成绩：'));：提示用户输入成绩，并将其转换为整数类型。
判断：
- 使用if-else结构判断成绩是否大于等于90分。
- 如果条件成立，则弹出对话框告知用户“升班”；否则告知用户“重修”。

8. 星期几判断

代码片段

<!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 2 3 4 5 6 7   多条件   多结果   多分支
        */
        //准备一个变量
        var i = parseInt(prompt('请输入1~7中的整数：'));
        //判断
        if(i === 1){
            alert('星期一');
        }else if(i === 2){
            alert('星期二');
        }else if(i === 3){
            alert('星期三');
        }else if(i === 4){
            alert('星期四');
        }else if(i === 5){
            alert('星期五');
        }else if(i === 6){
            alert('星期六');
        }else if(i === 7){
            alert('星期日');
        }else{
            alert('请输入1~7中的整数！');
        }
    </script>
</body>
</html>

代码解析

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

准备变量：
- var i = parseInt(prompt('请输入1~7中的整数：'));：提示用户输入一个1到7之间的整数，并将其转换为整数类型。
判断：
- 使用if-else if-else结构判断用户输入的数字，并输出对应的星期几。
- 如果用户输入的数字不在1到7之间，则提示用户重新输入。

9. 成绩等级判断（续）

代码片段

<!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()
        90-100 : score >= 90 && score <= 100
        80-89:   score >= 80 && score < 90
        70-79:   score >= 70 && score < 80
        60-69:   score >= 60 && score < 70
        <60:     score < 60

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

代码解析

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

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

总结与扩展

通过上述示例，我们展示了如何使用JavaScript中的if-else语句和多分支结构来处理不同的逻辑条件。这些代码片段不仅帮助初学者理解基本的控制结构，还展示了如何结合用户输入、数学运算和条件判断来实现一些常见的功能。

扩展思考

错误处理：
- 在实际应用中，除了简单的提示外，还可以考虑更复杂的错误处理机制，如重试输入或提供更详细的错误信息。
用户体验优化：
- 可以将用户输入和结果显示在网页界面上，而不是仅依赖弹出框。例如，使用HTML表单和DOM操作来增强用户体验。
函数封装：
- 将重复使用的代码封装成函数，可以提高代码的可读性和复用性。例如，将输入验证和计算逻辑分别封装成独立的函数。
事件驱动编程：
- 结合HTML按钮和事件监听器，可以让用户点击按钮触发计算，而不仅仅是加载页面时自动执行。

结尾

本文通过多个具体的JavaScript代码片段，详细介绍了如何使用if-else语句和多分支结构来实现各种逻辑判断。希望这些示例能够帮助初学者更好地理解和掌握JavaScript编程的基础知识。未来的学习中，建议读者尝试扩展这些代码片段，加入更多的功能和优化，以进一步提升编程技能。

完整代码汇总

为了方便参考，以下是所有代码片段的完整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>JavaScript逻辑与控制结构应用</title>
</head>
<body>
    <h2>简单计算器设计</h2>
    <script>
        // 简单计算器
        var i = parseInt(prompt('请输入第一个整数：'));
        var ch = prompt('请输入一个算术运算符:');
        var j = parseInt(prompt('请输入第二个整数：'));
        if(ch === '+'){
            alert(i + '+' + j + '=' + (i + j));
        }else if(ch === '-'){
            alert(i + '-' + j + '=' + (i - j));
        }else if(ch === '*'){
            alert(i + '*' + j + '=' + i * j);
        }else if(ch === '/'){
            alert(j === 0 ? '除数不能为零!' : i + '/' + j + '=' + (i / j).toFixed(2));
        }else if(ch === '%'){
            alert(j === 0 ? '除数不能为零！' : i + '%' + j + '=' + i % j);
        }else{
            alert('请输入一个正确的算术运算符！');
        }
    </script>

    <h2>成绩判断与通知书发放</h2>
    <script>
        var i_score = parseInt(prompt('请输入一个成绩：'));
        if( i_score >= 700 ){
            alert('祝贺你拿到清华大学的通知书！');
        }
    </script>

    <h2>两个数的交换</h2>
    <script>
        var a = parseInt(prompt('请输入一个整数：'));
        var b = parseInt(prompt('请输入一个整数：'));
        console.log('交换前：\na=' + a + '\nb=' + b);
        var t = a;
        a = b;
        b = t;
        console.log('交换后：\na=' + a + '\nb=' + b);
    </script>

    <h2>三个数由大到小排序</h2>
    <script>
        var a = parseInt(prompt('请输入一个整数：'));
        var b = parseInt(prompt('请输入一个整数：'));
        var c = parseInt(prompt('请输入一个整数：'));
        if(a < b){
            var t = a;
            a = b;
            b = t;
        }
        if(a < c){
            var t = a;
            a = c;
            c = t;
        }
        if(b < c){
            var t = b;
            b = c;
            c = t;
        }
        console.log(a,b,c);
    </script>

    <h2>求两个数中的最大值</h2>
    <script>
        var i = parseInt(prompt('请输入一个整数：'));
        var j = parseInt(prompt('请输入一个整数：'));
        if( i > j ){
            alert(i);
        }else{
            alert(j);
        }
    </script>

    <h2>求三个数中的最大值</h2>
    <script>
        var a = parseInt(prompt('请输入一个整数：'));
        var b = parseInt(prompt('请输入一个整数：'));
        var c = parseInt(prompt('请输入一个整数：'));
        var max;
        if(a > b){
            max = a;
        }else{
            max = b;
        }
        if(c > max){
            max = c;
        }
        alert('最大值是：' + max);
    </script>

    <h2>成绩判断与班级分配</h2>
    <script>
        var i_score = parseInt(prompt('请输入一个成绩：'));
        if( i_score >= 90 ){
            alert('升班');
        }else{
            alert('重修');
        }
    </script>

    <h2>星期几判断</h2>
    <script>
        var i = parseInt(prompt('请输入1~7中的整数：'));
        if(i === 1){
            alert('星期一');
        }else if(i === 2){
            alert('星期二');
        }else if(i === 3){
            alert('星期三');
        }else if(i === 4){
            alert('星期四');
        }else if(i === 5){
            alert('星期五');
        }else if(i === 6){
            alert('星期六');
        }else if(i === 7){
            alert('星期日');
        }else{
            alert('请输入1~7中的整数！');
        }
    </script>

    <h2>成绩等级判断</h2>
    <script>
        var score = parseInt(prompt('请输入一个成绩：'));
        if(score < 0 || score > 100){
            alert('一边儿玩去！');
        }else{
            if(score >= 90 && score <= 100){
                alert('优');
            }else if(score >= 80){
                alert('良');
            }else if(score >= 70){
                alert('中');
            }else if(score >= 60){
                alert('差');
            }else{
                alert('不及格');
            }
        }
    </script>
</body>
</html>

通过这些代码片段，您可以更好地理解JavaScript中的逻辑控制结构，并应用于实际项目中。希望这篇文章对您有所帮助！

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

来顶一下

返回首页

上一篇:JavaScript中的循环与条件判断应用下一篇:JavaScript 运算符与数据类型转换详解

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