JavaScript 柱状图代码错误分析及修正
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
align-items: flex-end;
width: 1200px;
height: 200px;
border: 3px solid skyblue;
margin: 100px auto;
}
.box div {
/* border: solid 1px skyblue; */
background-color: salmon;
height: 100px;
}
</style>
<body>
<div class='box'>
</div>
</body>
<script>
let num = prompt('输入柱状图数量')
let box = document.querySelector('.box')
let boxW = box.clientWidth
let sumNum = boxW / (Number(num) + (Number(num) - 1))
console.log(sumNum, Number(num) + (Number(num) - 1));
for (let index = 1; index <= num; index++) {
let div = document.createElement('div')
div.style.width = sumNum + 'px'
div.style.marginLeft = sumNum + 'px'
box.appendChild(div)
}
</script>
<p>这段代码中有一个错误。在计算柱状图的宽度时，使用的公式是错误的。应该是boxW / (num + (num - 1))，而不是boxW / (3 + (2 * num - 2))。以下是修正后的代码：</p>
<pre><code class="language-html"><style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
align-items: flex-end;
width: 1200px;
height: 200px;
border: 3px solid skyblue;
margin: 100px auto;
}
.box div {
/* border: solid 1px skyblue; */
background-color: salmon;
height: 100px;
}
</style>
<body>
<div class='box'>
</div>
</body>
<script>
let num = prompt('输入柱状图数量')
let box = document.querySelector('.box')
let boxW = box.clientWidth
let sumNum = boxW / (Number(num) + (Number(num) - 1))
console.log(sumNum, Number(num) + (Number(num) - 1));
for (let index = 1; index <= num; index++) {
let div = document.createElement('div')
div.style.width = sumNum + 'px'
div.style.marginLeft = sumNum + 'px'
box.appendChild(div)
}
</script>
</code></pre>
<p>修正后的代码将正确计算柱状图的宽度，并根据数量动态生成柱状图的div元素。</p>
原文地址: https://www.cveoy.top/t/topic/buvm 著作权归作者所有。请勿转载和采集!