Javascript数组案例-生成柱形图
1、根据数据生成柱形图
需求：用户输入四个季度多的数据，可以生成柱形图
分析：（1）需要输入四次，所以可以把4个数据放到一个数组里面，利用循环，弹出4次框，同时将输入的值放到数组里面
（2）遍历数组，根据输入的数据，生成4个柱形图，渲染打印到页面
注：柱形图就是div盒子，设置宽度固定，高度根据用户输入的数据来；div里面包含显示的数字和第几季度
全部代码如下图所示：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {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;}</style>
</head><body><script>// 1、四次弹框效果// 声明一个新的数组，存入每次输入四个季度的值let arr = []for (let i = 1; i <= 4; i++) {// let num = prompt(`请输入第${i}季度的数据`)// arr.push(num)// 简写形式arr.push(prompt(`请输入第${i}季度的数据`))}console.log(arr)// 打印盒子开头document.write(`<div class="box">`)// 打印盒子中间// 利用循环方式 从0开始，取数组的值，跟数组有关系for (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>
</body></html>