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 {
background-color: salmon;
}
</style>
<body>
<div class='box'>
</div>
</body>
<script>
<p>let num = prompt('输入柱状图数量')
let box = document.querySelector('.box')
let boxW = box.clientWidth
let sumNum = Math.floor(boxW / (2 * num - 1))
console.log(sumNum, 2 * 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)
}</p>
</script>
<p>这段代码存在两个问题：</p>
<ol>
<li>
<p>在CSS样式中，'height: 100px;'将所有的'<div>'元素的高度设置为固定的100px，而不是根据柱状图的数量进行动态调整。可以将这行代码删除，让高度由内容决定。</p>
</li>
<li>
<p>在JavaScript部分，'sumNum'的计算公式存在问题。应该将'boxW'除以'(2 * num - 1)'，而不是'(3 + (2 * num - 2))'。同时，应该将'sumNum'转换为整数，以避免出现小数像素。</p>
</li>
</ol>
<p>以下是修正后的代码：</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 {
background-color: salmon;
}
</style>
<body>
<div class='box'>
</div>
</body>
<script>
let num = prompt('输入柱状图数量')
let box = document.querySelector('.box')
let boxW = box.clientWidth
let sumNum = Math.floor(boxW / (2 * num - 1))
console.log(sumNum, 2 * 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>
原文地址: https://www.cveoy.top/t/topic/buuU 著作权归作者所有。请勿转载和采集!