javaScript | 练习：根据用户输入数据，动态更新绘制柱形图

一只漫漫

于 2024-03-08 15:19:01 发布

阅读量536

点赞数 21

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/ZM20170703/article/details/136558500

版权

视频演示效果如下：

根据用户输入数据动态更新绘制柱形图

参考代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>根据数据生成柱形图</title>
    <style>
        * {
            /* 做基本的格式清零操作 */
            margin: 0;
            padding: 0;
        }

        .box {
            width: 800px;
            height: 600px;
            border-left: 2px solid grey;
            /* 只显示做边框和下边框 */
            border-bottom: 2px solid gray;
            margin: 0 auto;
            /* 使得其显示在屏幕中央 */
            display: flex;
            /* 设置为弹性盒 */
            justify-content: space-around;
            /* 内容水平等距环绕 */
            align-items: flex-end;
            /* 侧轴向底部对齐 */
            text-align: center;
        }

        .box>div {
            width: 100px;
            background-color: aquamarine;
            display: flex;
            flex-direction: column;
            /* 主轴设为竖轴 */
            justify-content: space-between;
            /* 均匀排列每个元素 每个元素周围分配相同的空间 */
            margin-left: 10px;
        }

        .box div>span {
            margin-top: -30px;
        }

        .box div>h4 {
            width: 70px;
            margin-bottom: -35px;
            margin-left: 10px;
        }
    </style>
</head>

<body>
    <!-- <div class="box"> -->

    <!-- <div style="height:123px">
        <span>123</span>
        <h4>第一季度</h4>
    </div>
    <div style="height:163px">
        <span>163</span>
        <h4>第二季度</h4>
    </div>
    <div style="height:203px">
        <span>203</span>
        <h4>第三季度</h4>
    </div>
    <div style="height:93px">
        <span>93</span>
        <h4>第四季度</h4>
    </div> -->
    <!-- </div> -->

    <script>
        // 用循环弹出四个框 提醒用户输入 用数组存储数据
        let arr = [] //声明一个空数组 用于存储数据
        for (let i = 1; i <= 4; i++) { //跟数组无关 i=1起
            // let num = +prompt(`请输入${i}季度的数据:`)
            // arr.push(num)//向数组中添加元素 保存数据
            arr.push(+prompt(`请输入${i}季度的数据:`))
        }
        //1.渲染盒子首部
        document.write(`<div class="box">`)
        // 3.渲染盒子中间 利用循环方式 跟数组有关i=0起
        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>
           `)
            //根据用户输入 用模板字符串动态更新数据
        }

        // 2.渲染盒子尾部
        document.write(`</div>`)
    </script>
</body>

</html>

考查知识点如下：

变量和数据类型：let 用于声明变量，arr 是一个数组，用于存储用户输入的数据。
循环结构：for 循环用于重复执行某段代码，这里使用了两次循环。第一次循环用于获取用户输入，第二次循环用于渲染页面内容。
DOM操作：document.write 用于向HTML输出流写内容，这里用于动态生成HTML结构。需要注意的是，document.write 在实际开发中较少使用，因为它会覆盖页面的内容，而且不利于代码的模块化和可维护性。更常见的方法是使用DOM API（如createElement、appendChild等）来动态创建和修改HTML元素。
事件和用户交互：prompt 是一个浏览器提供的函数，用于弹出一个对话框，获取用户的输入。这里用于提示用户输入每个季度的数据。
字符串模板：使用反引号（`）来定义字符串模板，可以方便地在字符串中嵌入变量和表达式。

理解这段代码的关键在于：

流程控制：代码首先通过一个循环获取用户输入的四个季度的数据，并将这些数据存储在数组arr中。然后，通过另一个循环遍历这个数组，并使用document.write动态生成HTML元素，展示每个季度的数据。
数据驱动视图：这里的逻辑体现了数据驱动视图的思想。用户的输入（数据）决定了页面上展示的内容（视图）。