JavaScript基础-数组-求和、最值、筛选、去0、根据数据生成矩形图

Q _Q

于 2023-07-04 00:00:04 发布

阅读量337

点赞数

分类专栏： JavaScript基础文章标签： html css css3 前端 ecmascript

本文链接：https://blog.csdn.net/weixin_54021642/article/details/131368920

版权

JavaScript基础专栏收录该内容

23 篇文章 1 订阅

订阅专栏

<!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>
    <script>
        // 需求：求数组[2, 6, 1, 7, 4] 里面所有元素的和以及平均值
        let arr = [2, 6, 1, 7, 4]
        let sum = 0
        let average = 0

        for(let i = 0; i < arr.length; i++){
            sum += arr[i]
        }
        average = sum / arr.length

        console.log('所有元素的和', sum)
        console.log('平均值', average)

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

<!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>
    <script>
        // 需求：求数组[2, 6, 1, 77, 52, 25, 7] 中的最大值
        // 分析：
        // ①：声明一个保存最大元素的变量 max。
        // ②：默认最大值可以取数组中的第一个元素。
        // ③：遍历这个数组，把里面每个数组元素和 max 相比较。
        // ④：如果这个数组元素大于max 就把这个数组元素存到 max 里面，否则继续下一轮比较。
        // ⑤：最后输出这个 max
        let arr = [2, 6, 1, 77, 52, 25, 7]
        let max = arr[0]

        for(let i = 1; i < arr.length; i++){
            if(max < arr[i]){
                max = arr[i]
            }
        }
        console.log('数组[2, 6, 1, 77, 52, 25, 7] 中的最大值', max)

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

<!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>
    <script>
        // 需求：将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组
        // 分析：
        //     ①：声明一个新的数组用于存放新数据newArr
        //     ②：遍历原来的旧数组， 找出大于等于 10 的元素
        //     ③：依次追加给新数组 newArr
        let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
        let newArr = []
        for(let i = 0; i < arr.length; i++){
            if(arr[i] >= 10){
                newArr.push(arr[i])
            }
        }
        console.log('大于等于 10 的元素')
        for(let i = 0 ; i < newArr.length; i++){
            console.log(newArr[i])
        }
    </script>
</body>
</html>

<!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>
    <script>
        // 需求：将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组
        // 分析：
        //     ①：声明一个新的数组用于存放新数据newArr
        //     ②：遍历原来的旧数组， 找出不等于0的元素
        //     ③：依次追加给新数组 newArr
        let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
        let newArr = []

        for(let i = 0; i < arr.length; i++){
            if(arr[i] != 0){
                newArr.push(arr[i])
            }
        }
        
        for(let i = 0; i < newArr.length; i++){
            console.log(newArr[i])
        }
    </script>
</body>
</html>

<!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>根据数据生成柱状图</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-evenly;
        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>
    <!-- 
    <div class="box">

      <div style="height: 33px;">
        <span>33</span>
        <h4>第1季度</h4>
      </div>

      <div style="height: 22px;">
        <span>22</span>
        <h4>第2季度</h4>
      </div>
      <div style="height: 33px;">
        <span>33</span>
        <h4>第3季度</h4>
      </div>
      <div style="height: 33px;">
        <span>44</span>
        <h4>第4季度</h4>
      </div>

    </div>
    -->

    <script>
      /* ========第一部分：收集用户输入数据================== */
      // 3. 准备一个数组，用于存储用户输入的数据
      let array = []
      // 1. 通过循环控制弹窗次数
      for (let index = 0; index < 2; index++) {
        // 2. 获取弹窗用户输入的数据，可以转换成数值类型
        let res = Number(prompt(`请输入第 ${index + 1} 季度数据`))
        // 4. 把用户输入的数据存到数组中
        array.push(res)
      }
      /* ===========第二部分，根据数组生成柱状图============= */
      debugger
      // 先准备个 .box 盒子，作为柱状图分区
      document.write(`<div class="box">`)
      // 遍历改数组，根据数据生成4个柱形图，渲染打印到页面中
      for (let index = 0; index < array.length; index++) {
        // 重复输出柱子 div
        document.write(`
          <div style="height: ${array[index]}px;">
            <span>${array[index]}</span>
            <h4>第${index + 1}季度</h4>
          </div>
        `)        
      }
      // 给 <div class="box"> 的结束标签
      document.write(`</div>`)
    </script>
  </body>
</html>