上一篇文章的链接 juejin.cn/post/721356…

今天主要是写案例喽

案列效果图：

 <style>
  *{
    padding: 0;
    margin: 0;
  }

  .box{
    /* 先给外面的大盒子给个背景色，用来调试 */
    /* background-color: rgb(180, 164, 164); */
    /* 用flex布局，让盒子内部竖着显示排列 */
      display:flex;
      width: 700px;
      height: 300px;
      /* 按照需求，分别给大盒子左边框和底边框 */
      border-left:1px solid green;
      border-bottom: 1px solid green;
      /* 调节大盒子上下左右的距离 */
      margin: 60px auto;
      /* 均匀排列每个元素，每个元素周围分配相同的空间 */
      justify-content: space-around;
      /* 弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界 
      也就是让元素底部对齐*/
      align-items: flex-end;      
  }

  /* 子盒子 */
  .box>div{
    display: flex;
    width: 50px;
    background-color: rgb(104, 234, 104);
    /* 主轴为垂直方向 */
    flex-direction: column;
    /*  均匀排列每个元素,首个元素放置于起点，末尾元素放置于终点 */
    justify-content: space-between;
  }

  .box div span{
    margin-top: -20px;
  }
  .box div h4{
    margin-bottom: -45px;
    width: 70px;
    margin-left: -10px;
  }
  </style>

<script>
    // 需求：用户输入四个季度的数据，可以生成柱状图
    // 分析：
    // 1.需要输入4次，所以可以把4个数据放到一个数组里面
    let arr = []
    // 利用循环，弹出四次框，同时存到数组里面
    for(let i=1;i<=4;i++){
    //  let num = prompt(`请输入第${i}季度的数据`)
    //  arr.push(num)
    // 简化代码
     arr.push(prompt(`请输入第${i}季度的数据`))
    }
    console.log(arr)
    // 2.遍历改数组，根据数据生成4个柱形图，渲染打印到页面中
    // 柱形图就是div盒子，设置宽高固定，高度是用户输入的数据
    // div里面包含显示的数字和第n季度

    // 先打印一个空盒子
    // 盒子开头
    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>`)

多理解多理解多理解 重要的事情说三遍！ 理解万岁！