js- day03- 将数据变成柱形图

柱形图的渲染

* {

            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;

        }

js渲染

<script>

        //1.利用循环弹出四次输入框，会得到四个数据，放到数组里面

        let arr = []

        for(let i = 1;i<=4;i++)

        {

            arr.push(prompt(`请输入第${i}季度的数据`))

        }

        //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>