用css行内式实现,输入数据自动生成柱形图

效果图

需求： 用户输入四个季度的数据，可以生成柱形图

分析：

①：需要输入4次，所以可以把4个数据放到一个数组里面

• 利用循环，弹出4次框，同时存到数组里面

②：遍历改数组，根据数据生成4个柱形图，渲染打印到页面中

• 柱形图就是div盒子，设置宽度固定，高度是用户输入的数据
• div里面包含显示的数字和 第n季度

1、css-页面布局

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      ul {
        list-style: none;
        width: 1000px;
        height: 600px;
        margin: 100px auto;
        display: flex;
        justify-content: space-around;
        border: 1px solid #000;

        /* 设置侧轴的对齐方式 下对齐 */
        align-items: flex-end;
      }
      li {
        width: 100px;
        background-color: pink;
        position: relative;
      }
      span {
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%);
      }
      div {
        position: absolute;
        width: 100%;
        text-align: center;
        /* 相对于父元素的高 */
        top: 100%;
      }

2.for循环弹框输入数据存取数组，< ul>字符串拼接，遍历数组。

    <script>
          /* 定义季度数  空数组*/
        let Num=prompt('请输入次数'),arr =[]
        let liHTML="<ul>"
          
            for (let i = 0; i < Num; i++) {
                arr[arr.length]=+prompt(`请输入第${i+1}季度`)
                liHTML +=`<li style="height:${arr[i]}px"> <span>${arr[i]}</span> <div>第${i+1}季度</div> </li>`
                
            }
                liHTML+="</ul>"   
                document.write(liHTML) 
                console.log(arr) 
        
    </script>