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

2024-08-31 08:53:33

柱形图的渲染

* {

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>

最新文章

热门文章