JavaScript流程控制及函数

1.1 条件语句分支结构

单向分支

if (条件表达式) {
    code...
}

双向分支

if (条件表达式){
    
} else {
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>同志交友</title>
    <style>
        input {
            width: 300px;
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
        }
        button {
            padding: 10px 20px;
            border: 1px solid #ccc;
            background: #f5f5f5;
        }
        #res {
            margin-top:20px;
            width: 300px;
            min-height: 100px;
            padding: 10px;
            border:1px solid #ccc;
        }

    </style>
</head>
<body>
    <h1>同志交友</h1>
    <hr>
    <h3>请输入您的成绩：</h3>
    <!-- 通过id来获取用户输入的值 -->
    <input type="number" id="score">
    <!-- 触发事件，也就是为了通过提交按钮，来触发该函数的执行 -->
    <button onclick="makeScore()">提交</button>

    <!-- 通过id来将函数中逻辑运算的结果显示到div元素中 -->
    <div id="res"></div>


    <script>
        //声明函数
        function makeScore() {
            //获取用户输入的成绩
            var score = Number(document.getElementById('score').value);

            //对成绩进行判断
            if (score > 60) {
                var resContent = '你的成绩及格, 来快活吧';
            } else {
                var resContent = '您的成绩你不及格，去死吧';
            }

            //先定位到id，然后在点innerHTML，把结果写入到div中 id=res
            document.getElementById('res').innerHTML = resContent;

        }

    </script>
</body>
</html>

双向分支

1.1 条件语句 分支结构

单向分支

双向分支

1.1 条件语句分支结构