javascript - 使用 HTML 和 CSS 制作动画 parking 场网格

Question

<分区>

Answer 1

您可以使用 HTML 使用各种 DIV 来映射空间，然后将 CSS 类添加到您想要直观指示已占用/空的位置。

但是，如果您的 parking 位稍微偏离完全正交的矩形，您可能会发现基于 SVG 的 parking 位 map (其中每个 parking 位都是一个 PATH 元素)会更好。

无论哪种情况，只需从每个位置添加/删除 CSS 类以指示其状态。

例如给每个点一个 ID“spot_123”(调整数字部分以适应)然后当你想在现场设置一个状态时添加一个类。

.available{
  background-color:rgba(0,255,0,0.5);
}