if判断和for循环，Flex布局

景睿哲

已于 2022-03-02 11:36:16 修改

阅读量256

点赞数 3

文章标签：前端开发语言 javascript

于 2022-03-01 18:49:57 首次发布

本文链接：https://blog.csdn.net/Rui_shen/article/details/123211546

版权

1 遍历数组 Array = [ 33,86,98,33.45 ]

let Array = [33,86,98,33.45]
    for(let i = 0; i < Array.length; i++) {
        document.write(`${Array[i]}<br />`)
    }

// 输出结果是: 33 86 98 33 45

2 遍历数组 studentArray，如果sex为男，输出：××下课去下围棋，sex为女，输出：××下课去逛街，如果like为篮球，输出：该同学的名字为：××

    let studentArray = [{
            "name": '张三',
            "sex": '男',
            "height": 175,
            "width": 145,
            "like": ["排球", "美术", "象棋"]
        },
        {
            "name": '李四',
            "sex": '男',
            "height": 180,
            "width": 170,
            "like": ["篮球", "rap", "跳棋"]
        },
        {
            "name": '王五',
            "sex": '女',
            "height": 170,
            "width": 180,
            "like": ["围棋", "游泳", "足球"]
        },
    ]

    // 判断 sex
    for (let i = 0; i < studentArray.length; i++) {
        if (studentArray[i].sex == '男') {
            document.write(`${studentArray[i].name}下课去下围棋<br />`)
        } else if (studentArray[i].sex == '女') {
            document.write(`${studentArray[i].name}下课去逛街<br />`)
        }
    }

    //输出结果为: 张三下课去下围棋  李四下课去下围棋  王五下课去逛街

    // 判断爱好
    for (let i = 0; i < studentArray.length; i++) {
        let like = studentArray[i];
        for (let j = 0; j < like["like"].length; j++) {
            if (like["like"][j] == "篮球") {
                document.write(like["name"]);
            }
        }
    }

    //输出结果为: 李四

3 写出下面程序输出结果（ ... 称字面量）

var arr1 =[1, 2, 3];
var arr2 = arr1;
var arr3 =[...arr1];
arr2[0]= 5;
console.log(arr1); //输出结果为: [5,2,3]
console.log(arr2);//输出结果为: [5,2,3]
console.log(arr3);//输出结果为: [1,2,3]

4 for循环(打印九九乘法表)

    // 控制台展示
    let str = '';
    for (let i = 1; i <= 9; i++) {
        for (let j = 1; j <= i; j++) {
            str += `${j}×${i}=${j*i}\t`
        }
        str += '\n'
    }
    console.log(str);

    // 页面展示
    for (let i = 1; i <= 9; i++) {
        for (let j = 1; j <= i; j++) {
            document.write(`${j}×${i}=${i*j}&nbsp;&nbsp;`)
        }
        document.write("<br/>")
    }

输出结果为:

5 for循环(根据输入成绩判断情况)

    let result = prompt('请输入成绩');
    if (result >= 90) {
        alert("去动物园")
    } else if (result >= 80) {
        alert("去看电视")
    } else if (result >= 60) {
        alert("奖励一个鸡腿")
    }else{
        alert("挨打")
    }

    // 输入90包括90结果为: 去动物园
    // 输入90包括80结果为: 去看电视
    // 输入90包括60结果为: 奖励一个鸡腿
    // 否则输出结果: 挨打

6 用flex布局（彩色盒子）

<!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>
    <div style="width: 100%;">
        <!-- 头部 -->
        <div style="width: 100%;height: 50px;background-color: red;"></div>
        <!-- 中间 -->
        <div style="display: flex;">
            <!-- 左边 -->
            <div style="flex: 1;height: 600px;background-color: rgb(18, 74, 228);"></div>
            <!-- 中间 -->
            <div style="flex: 2;">
                <div style="display: flex;">
                    <div style="background-color: rgb(27, 223, 141);width: 50%;height: 50px;"></div>
                    <div style="background-color: rgb(134, 238, 195);width: 50%;height: 50px;"></div>
                </div>
                <div style="display: flex;">
                    <div style="flex: 2;">
                        <div style="background-color: rgb(183, 42, 211);height: 100px;"></div>
                        <div style="background-color: rgb(35, 210, 216);height: 180px;"></div>
                    </div>
                    <div style="flex: 6;background-color: rgb(218, 241, 9);height: 280px;"></div>
                </div>
                <div style="display: flex;">
                    <div style="flex: 6;">
                        <div style="background-color: rgb(41, 42, 114);height: 90px;"></div>
                        <div style="background-color: rgb(79, 128, 129);height: 180px;"></div>
                    </div>
                    <div style="flex: 2;background-color: rgb(241, 198, 9);height: 270px;"></div>
                </div>
            </div>
            <!-- 右边 -->
            <div style="flex: 1;height: 600px;background-color: rgb(18, 74, 228);"></div>
        </div>
        <!-- 底部 -->
        <div style="width: 100%; height: 50px;background-color: rgb(14, 166, 226);"></div>
    </div>
</body>

</html>

景睿哲

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
if判断和for循环，Flex布局

1遍历数组 Array = [ 33,86,98,33.45]let Array = [33,86,98,33.45] for(let i = 0; i < Array.length; i++) { document.write(`${Array[i]}<br />`) }// 输出结果是: 33 86 98 33 452 遍历数组 studentArray，如果sex为男，输出：××下课去下围棋，sex为女，输出：××下课去逛街，如果..
复制链接

扫一扫