六、生成柱子

允许用户输入一个数字，根据用户数字制作如下效果（30分）
要求1：柱子的数量根据用户的输入数确定
要求2：柱子的高度随机
要求3：柱子的颜色随机
要求4：柱子间的间隔与柱子的宽度是一样的

<style>
      .box {
        width: 900px;
        height: 500px;
        border: 2px solid #ccc;
        box-sizing: border-box;
        margin: 100px auto;
        display: flex;
        justify-content: space-evenly;
        align-items: flex-end;
      }
      /* .sub {
        width: 100px;
        background-color: #f00;
        height:200px
      } */
    </style>
  </head>
  <body>
    <div class="box">
      <!-- <div class="sub"></div> -->
    </div>
    <script>
      let box = document.querySelector('.box')
      let boxW = box.clientWidth
      let boxH = box.clientHeight

      let num = +prompt('你要几个？')
      for (let i = 0; i < num; i++) {
        let div = document.createElement('div')

        // 设置样式
        div.style.width = boxW / (num * 2 + 1) + 'px'
        div.style.height = parseInt(Math.random() * boxH) + 'px'
        div.style.background = `rgb(${Math.random() * 256},${Math.random() *
          256},${Math.random() * 256})`

        box.appendChild(div)
      }
    </script>

Webapi-案例（生成柱子）

六、生成柱子