视频演示效果如下:
根据用户输入数据动态更新绘制柱形图
参考代码如下:
<!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元素,展示每个季度的数据。 - 数据驱动视图:这里的逻辑体现了数据驱动视图的思想。用户的输入(数据)决定了页面上展示的内容(视图)。