在使用Java输入的情况下在网站上创建形状

Question

假设我在Javascript中有一个整数值为[10, 20, 30, 40, 50]的数组。我的目标是并排放置矩形，这些矩形的宽度为10个像素，高度为数组中指定的像素。在这种情况下，我将有一个10像素乘10像素的矩形。 10x10矩形的右边是矩形10x20，然后是10x30，依此类推。我将在HTML，CSS和JS文件中进行编码以实现此目的。现在，我唯一想到的就是带有形状的HTML表。下图是我想要的输出示例：

Answer 1

有很多方法可以做到这一点。一种选择是仅使div元素动态循环并设置其高度。您将需要对它们进行样式设置，以使其表现出所需的样式-例如，当它们溢出时会发生什么？

这是基本概念：

let heights = [10, 20, 30, 40, 50, 30, 10]
let root = document.getElementById('root')

heights.forEach(n => {
  let d = document.createElement('div')
  d.style.height = n  + 'px'
  root.appendChild(d)
})

#root > div {
  display:inline-block;
  border: 1px solid black;
  width: 10px;
  margin:2px;
}

<div id="root">
</div>