JavaScript 生成等宽等间距柱状图

<script>
  let num = prompt('输入柱状图数量');
  let box = document.querySelector('.box');
  let boxW = box.clientWidth;
  let sumNum = boxW / (3 + (2 * num - 2));
  console.log(sumNum, 3 + (2 * num - 2));
  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>这段代码实现了一个功能：根据用户输入的数字创建一个柱状图，每个柱子的宽度和间隔都是相等的。</p>
<p>首先，代码通过<code>prompt</code>方法弹出一个输入框，让用户输入柱状图的数量。用户输入的数字被保存在变量<code>num</code>中。</p>
<p>然后，代码通过<code>document.querySelector</code>方法找到页面中的一个具有<code>.box</code>类名的元素，并将其保存在变量<code>box</code>中。</p>
<p>接下来，代码通过<code>box.clientWidth</code>获取到<code>.box</code>元素的宽度，并将其保存在变量<code>boxW</code>中。</p>
<p>然后，代码通过计算得到每个柱子的宽度，将其保存在变量<code>sumNum</code>中。计算公式为：<code>boxW / (3 + (2 * num - 2))</code>，其中<code>3</code>表示每个柱子的宽度，<code>2 * num - 2</code>表示所有间隔的总宽度。</p>
<p>最后，代码通过一个循环，根据用户输入的数字创建对应数量的柱子。每个柱子都是一个<code>div</code>元素，宽度和间隔都是通过设置<code>style</code>属性来实现的。每个柱子的宽度和间隔都是<code>sumNum</code>。</p>
<p>总结一下，这段代码的功能是根据用户输入的数字创建一个柱状图，每个柱子的宽度和间隔都是相等的。</p>