前端之JS条件、循环语句

一只爱吃萝卜的小兔子

已于 2022-03-21 14:36:49 修改

阅读量4.5k

点赞数

分类专栏：前端基础文章标签：前端 css css3 javascript

于 2022-03-20 09:43:24 首次发布

本文链接：https://blog.csdn.net/weixin_46372074/article/details/123588527

版权

前端基础专栏收录该内容

53 篇文章 4 订阅

订阅专栏

本文介绍了JavaScript中的条件语句（if-else, elseif）用法，包括条件运算符、switch结构，以及三元运算符的应用实例。通过实例演示如何根据用户选择改变网页主题和响应不同情况。同时涵盖了循环语句（for, while）和函数部分，展示了编程中做决策和控制流程的基本技巧。

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

条件语句 – 做选择

在代码中的做决定, 不同的数据, 做出不同的决定.
游戏中, 生命值归零, 游戏结束;

if……else……

语法:

if (满足这个条件) {
	就执行这里的代码1;
} else {//如果不满足上面的条件, 就执行下方的代码2
	代码2
}

条件语句可以嵌套使用, 而且完全可以做更多的选择 – else if(){
}数量不限。
:

if(){
}else if(){
}……
else{
}

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<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></title>
</head>

<body>
    <p>你爱我吗?&nbsp;&nbsp;回答:&nbsp;
        <select>
            <option value="choice">--选择--</option>
            <option value="love">爱</option>
            <option value="loved">爱过</option>
            <option value="no">不爱了</option>
            <option value="giveUp">放弃了</option>
        </select>
    </p>
    <p></p>

    <script>
        var select = document.querySelector('select');
        var p = document.querySelectorAll('p');

        select.onchange = function() {
            var choice = select.value;
            // ADD SWITCH STATEMENT
            if (choice === 'love') {
                p[p.length - 1].textContent = '我还爱着你. ';
            } else if (choice === 'choice') {
				p[p.length - 1].textContent = '';
            } else {
                p[p.length - 1].textContent = '我曾爱过你. ';
            }
        }
    </script>
</body>

</html>

条件语句需要用到条件运算符.

条件运算符

比较运算符
逻辑运算符: && , || 和 !
算数运算符

在这里插入图片描述
4. 赋值运算符

switch

if……else……用于少量选择, 或是很复杂的的情况. 而 switch用于大量选择.
语法:

switch (expression) {
  case choice1:
    run this code
    break;

  case choice2:
    run this code instead
    break;

  // include as many cases as you like

  default:
    actually, just run this code
}

switch 后的括号内写 表达式或值, 这是在做选择.
而 case 后的 表达式或值是选项. 每个case 执行语句后都要加一个 break; 这保证switch是个单选, 执行这个语句后就不会执行其他语句.
default 和case唯 2 的不同是他放在了最后可以不加 break, 另一个是没有找对应的 case 选项, 就默认执行 default 下的代码.

三元运算符

( condition ) ? run this code : run this code 
1. condition 是 true, run this code 
2. condition 是 false, run this code instead

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<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></title>
</head>

<body>
    <p>你爱我吗?&nbsp;&nbsp;回答:&nbsp;
        <select>
            <option value="choice">--选择--</option>
            <option value="love">爱</option>
            <option value="loved">爱过</option>
            <option value="no">不爱了</option>
            <option value="giveUp">放弃了</option>
        </select>
    </p>
    <p></p>

    <script>
        var select = document.querySelector('select');
        var p = document.querySelectorAll('p');

        select.onchange = function() {
            var choice = select.value;
            // ADD SWITCH STATEMENT
            choice === 'choice' ? p[p.length - 1].textContent = '' : choice === 'love' ? p[p.length - 1].textContent = '我还爱着你. ' : p[p.length - 1].textContent = '我曾爱过你. ';
        }
    </script>
</body>

</html>

网页主题选择

<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<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></title>
</head>

<body>
    <p>选择主题:
        <select>
        <option value="while">白色</option>
        <option value="black">黑色</option>
        <option value="purple">紫色</option>
        <option value="yellow">黄色</option>
        <option value="psychedelic">幻色</option>
    </select>

    </p>
    <script>
        var select = document.querySelector('select');
        var html = document.querySelector('html');

        select.onchange = function() {
            var choice = select.value;

            // ADD SWITCH STATEMENT
            switch (choice) {
                case 'black':
                    update('black', 'white');
                    break;
                case 'while':
                    update('while', 'black');
                    break;

                case 'purple':
                    update('purple', 'white');
                    break;

                case 'yellow':
                    update('yellow', 'black');
                    break;

                case 'psychedelic':
                    update('lime', 'purple');
                    break;
            }
        }

        function update(bgColor, textColor) {
            html.style.backgroundColor = bgColor;
            html.style.color = textColor;
        }
    </script>
</body>

</html>

循环语句

for 和 break

for(起始条件; 循环条件; 迭代器) { 循环代码; }

break; // 退出当前循环

在这里插入图片描述

<script>
        document.write("百以内的素数: ")
        for (var i = 2; i <= 100; i++) {
            let st = 0;
            for (let j = 2; j < Math.sqrt(i); j++) {
                if (i % j === 0) {
                    st = 1;
                    break;
                }
            }
            if (st === 0) {
                document.write(i + ' ');
            }
        }
        document.write('<br/>');
</script>

while 和 continue

输出百以内的奇数:
在这里插入图片描述

<body>
    <p></p>
    <script>
        let p = document.querySelector('p');
        var i = 0;

        while (i < 100) {
            i++;
            if (i % 2 === 0) { //偶数跳过
                continue; //循环内continue后的语句不在执行
            }
            p.textContent += i + ' ';
        }
    </script>
</body>

<body>
    <p></p>
    <script>
        // 输出百以内的奇数
        let p = document.querySelector('p');
        var i = 0;


        do {
            i++;
            if (i % 2 === 0) { //偶数跳过
                continue; //循环内continue后的语句不在执行
            }
            p.textContent += i + ' ';
        } while (i < 100);
    </script>
</body>