js中for与if的实例应用还有关于flex的应用

qicnut22

已于 2022-03-01 18:33:00 修改

阅读量134

点赞数 1

文章标签： javascript html5 css3 es6 json

于 2022-03-01 18:21:22 首次发布

本文链接：https://blog.csdn.net/qicnut22/article/details/123212048

版权

1、遍历数组array=[5,8,10,45,86]

let array=[5,8,10,45,86]
    for (let index = 0; index < array.length; index++) {
       document.write(`${array[index]}<br/>`)
    }

2、遍历数组studentArray，如果sex为男，输出：放学去操场打篮球，sex为女，输出：放学回家

let studentArray=[
  		{"name":"张三","sex":"男","age":18,"height":175,"weight":145},
		{"name":"李四","sex":"男","age":19,"height":180,"weight":150},
		{"name":"王五","sex":"女","age":20,"height":170,"weight":140}
];
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/>`)
        }else{
            console.log(studentArray[i])
        }
 }

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、if判断的实例应用：

小明考试成绩下来了，拿着试卷回了家

妈妈对小明说：

超过90分的话就去动物园玩；

超过80分的话可以看两个小时电视；

及格的话就奖励一个鸡腿；

否则就等着挨打吧

var score=100;
    if(score > 90){
        alert("小明可以去动物园玩")
    }else if(score>80){
        alert("小明可以看两个小时电视")
    }else if(score>=60){
        alert("小明得到一个鸡腿")
    }else {
        alert("小明会被打一顿")
    }

5、关于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: 100px;background-color: aquamarine;"></div>
        <!-- 中间 -->
        <div style="width: 100%;height: 500px;display: flex;">
            <!-- 左边 -->
            <div style="flex:1;background-color:beige"></div>
            <!-- 中间 -->
            <div style="flex:6;background-color: bisque;">
                <!-- 上 -->
                <div style="width: 100%;height: 100px;display: flex;">
                    <div style="flex: 1;background-color: rgb(24, 134, 230);"></div>
                    <div style="flex: 1;background-color: rgb(172, 214, 57);"></div>
                </div>
                <!-- 中 -->
                <div style="width: 100%;height: 200px;background-color: rgb(214, 59, 59);display: flex">
                    <div style="flex: 1;background-color: rgb(57, 71, 70);">
                        <div style="width: 100%;height: 50px;background-color: rgb(108, 111, 160);"></div>
                        <div style="width: 100%;height: 150px;background-color: rgb(92, 98, 226);"></div>
                    </div>
                    <div style="flex: 1;background-color: rgb(218, 198, 90);"></div>
                </div>
                <!-- 下 -->
                <div style="width: 100%;height: 200px;background-color: rgb(109, 105, 105);display: flex;">
                    <div style="flex: 3;background-color: rgb(146, 93, 189);">
                        <div style="width: 100%;height: 150px;background-color: rgb(108, 111, 160);"></div>
                        <div style="width: 100%;height: 50px;background-color: rgb(92, 98, 226);"></div>
                    </div>
                    <div style="flex: 1;background-color: rgb(119, 115, 122);"></div>
                </div>
            </div>
            <!-- 右边 -->
            <div style="flex:1;background-color: blue;"></div>
        </div>
        <!-- 底部 -->
        <div style="width: 100%;height: 100px;background-color: aquamarine;"></div>
    </div>
</body>
</html>

qicnut22

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js中for与if的实例应用还有关于flex的应用

1、遍历数组Array=[5,8,10,45,86]let array=[5,8,10,45,86] for (let index = 0; index < array.length; index++) { document.write(`${array[index]}<br/>`) }2、遍历数组studentArray，如果sex为男，输出：放学去操场打篮球，sex为女，输出：放学回家let studentArray=[ {"nam
复制链接

扫一扫