实现根据输入数据生成柱状图效果

最新推荐文章于 2024-11-06 20:56:04 发布

W2399755751

最新推荐文章于 2024-11-06 20:56:04 发布

阅读量428

点赞数 11

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/W2399755751/article/details/135585841

版权

该篇文章展示了如何结合CSS和JavaScript在HTML中创建一个响应式的盒子布局，用户可以输入季度数据，根据输入动态改变每个季度的高度并显示相应标题。

摘要由CSDN通过智能技术生成

输入 100 150 200 150 后运行结果

代码实现 CSS

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

        .box {
            display: flex;
            width: 700px;
            height: 300px;
            border-left: 1px solid red;
            border-bottom: 1px solid red;
            margin: 50px auto;
            justify-content: space-around;
            align-items: flex-end;
            text-align: center;
        }

        .box>div {
            display: flex;
            width: 50px;
            background-color: red;
            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>

JavaScript

 <script>
        let one = +prompt("请输入第一个季度的数据")
        let two = +prompt("请输入第二个季度的数据")
        let three = +prompt("请输入第三个季度的数据")
        let four = +prompt("请输入第四个季度的数据")

        document.write(`
        <div class="box">
        <div style="height: ${one}px;">
            <span>${one}</span>
            <h4>第1季度</h4>
        </div>
        <div style="height: ${two}px;">
            <span>${two}</span>
            <h4>第2季度</h4>
        </div>
        <div style="height:${three}px;">
            <span>${three}</span>
            <h4>第3季度</h4>
        </div>
        <div style="height:${four}px;">
            <span>${four}</span>
            <h4>第4季度</h4>
        </div>

    </div>
                        
       `)


    </script>