js第三天-优快云博客

for循环

分支较少时，if...else语句执行效率高

分支较多时，switch语句执行效率高，且结构清晰

打印乘法表

    <script>
        for (let i = 1; i <= 9; i++) {
            for (let j = 1; j <= i; j++) {
                document.write(`${i}×${j}=${i * j}  &nbsp;`)
            }
            document.write('<br>')
        }
    </script>

规范的做法：把公式装进span中去

document.write(`<span>${i}×${j}=${i * j}</span> &nbsp;`)

稍作美化

 <style>
        span {
            display: inline-block;
            padding: 5px 10px;
            border: 1px solid pink;
            margin: 2px;
            border-radius: 5px;
            box-shadow: 2px 2px 2px rgb(255, 192, 203, .999);
            background-color: rgb(255, 192, 203, .1);
            width: 100px;
            text-align: center;
        }
    </style>

数组

Array是一种可以按顺序保存数据的数据类型

声明：

        //字面量声明数组
        let arr1 = [ 1, 2, 3, 4, 5]
        //使用new Array 构造函数声明
        let arr2=new Array(1,2,3,4)

获取长度 arr.length

遍历数组：

        for (let i = 0; i < arr1.length; i++) {
            document.write(arr1[i])
        }

增

arr.push，将新元素添加到数组末尾

        let arr = [1, 2, 3]
        arr.push(4, 5)
        console.log(arr);

arr.unshift将新元素添加到数组的开头，并返回该数组的长度

        let arr = [1, 2, 3]
        arr.unshift(6, 5, 4)
        console.log(arr);

删

arr.pop()删除最后一个元素

    <script>
        let arr = [1, 2, 3, 4, 5]
        arr.pop()
        console.log(arr);

    </script>

arr.shift()删除第一个元素

arr.splice() 删除指定元素

用法：arr.splice(start,deleteCount)输入起始位置（索引号）和删除几个元素

若不写deleteCount则后面的全部删除

查

数组+下标

还有遍历数组

例子：求数组中的最大值和最小值

    <script>
        let arr = [2, 6, 1, 77, 52, 25, 7]
        let max = 0
        let min = arr[0]
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] > max) {
                max = arr[i]
            }
            if (arr[i] < min) [
                min = arr[i]
            ]
        }
        document.write('max<br>')

        document.write(min)
    </script>

筛选，并存入新数组

    <script>
        let arr = [2, 0, 6, 1, 77, 9, 54, 78]
        let newArr = []
        for (let i = 0; i < arr.length; i++) {
            if (arr[i] > 10) {
                newArr.push(arr[i])
            }
        }
        console.log(newArr);
    </script>

改

数组[下标]=新值

渲染柱形图

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            display: flex;
            width: 700px;
            height: 300px;
            border-left: 1px solid pink;
            border-bottom: 1px solid pink;
            margin: 50px auto;
            justify-content: space-around;
            align-items: flex-end;
            text-align: center;
        }

        .box>div {
            display: flex;
            width: 50px;
            background-color: pink;
            flex-direction: column;
            justify-content: space-between;
        }

        .box div span {

            margin-top: -20px;
        }

        .box div h4 {
            margin-bottom: -35px;
            width: 70px;
            margin-left: -10px;
        }
    </style>
</head>

<body>



    <script>
        let arr = []
        for (let i = 0; i < 4; i++) {
            arr[i] = prompt(`请输入第${i + 1}季度的数据:`)
        }
        console.log(arr);
        //大盒子头
        document.write(`<div class="box">`)
        //中间
        for (let i = 0; i < arr.length; i++) {
            document.write(`  
            <div style="height: ${arr[i]}px;">
                <span>${arr[i]}</span>
                <h4>第${i + 1}季度</h4>
            </div>`)
        }
        //大盒子尾
        document.write(`</div>`)

    </script>
</body>

</html>