如何用HTML/JavaScript循环生成span标签并精简大量span代码？

我需要实现随机时间生成粒子的效果，目前是手动编写大量带有自定义CSS变量--i的<span>标签来实现（代码如下）。想知道怎么用HTML/JavaScript的for循环来生成这些span标签精简代码，求相关建议。

<header>
<a href="#" class="loo">cat <i class="fa-d fa-ct"></i></a>
<div class="particle">
  <span style="--i:50;"></span>
  <span style="--i:21;"></span>
  <span style="--i:16;"></span>
  <span style="--i:18;"></span>
  <span style="--i:13;"></span>
  <span style="--i:22;"></span>
  <span style="--i:15;"></span>
  <span style="--i:24;"></span>
  <span style="--i:17;"></span>
  <span style="--i:28;"></span>
  <span style="--i:12;"></span>
  <span style="--i:26;"></span>
  <span style="--i:23;"></span>
  <span style="--i:13;"></span>
  <span style="--i:17;"></span>
  <span style="--i:11;"></span>
  <span style="--i:21;"></span>
  <span style="--i:16;"></span>
</div>
</header>

方法1：生成随机--i值的粒子 #

如果需要每个粒子的触发时间完全随机，直接用JS循环创建指定数量的span，给每个span分配随机的--i值：

<header>
  <a href="#" class="loo">cat <i class="fa-d fa-ct"></i></a>
  <!-- 给容器加id方便JS获取 -->
  <div class="particle" id="particleContainer"></div>
</header>

<script>
// 获取粒子容器
const container = document.getElementById('particleContainer');
// 想要生成的粒子总数
const totalParticles = 18;

for (let i = 0; i < totalParticles; i++) {
  // 生成10-50之间的随机整数，可根据需求调整范围
  const randomDelay = Math.floor(Math.random() * 41) + 10;
  const span = document.createElement('span');
  // 设置CSS变量--i
  span.style.setProperty('--i', randomDelay);
  container.appendChild(span);
}
</script>

方法2：复用原有固定--i值数组 #

如果想保留原来手动设置的那些--i数值，把它们存成数组，再循环生成对应的span：

<header>
  <a href="#" class="loo">cat <i class="fa-d fa-ct"></i></a>
  <div class="particle" id="particleContainer"></div>
</header>

<script>
const container = document.getElementById('particleContainer');
// 原来的--i数值集合
const delayValues = [50,21,16,18,13,22,15,24,17,28,12,26,23,13,17,11,21,16];

// 遍历数组生成每个span
delayValues.forEach(value => {
  const span = document.createElement('span');
  span.style.setProperty('--i', value);
  container.appendChild(span);
});
</script>

实用优化提示 #

• 动态调整粒子数量：只需要修改totalParticles或者数组长度，不用手动修改HTML代码；
• 封装随机逻辑：可以把生成随机延迟的代码写成函数，比如getRandomDelay(min, max)，方便后续统一调整；
• 样式分离：如果粒子有统一样式，直接在CSS里给.particle span设置，JS只负责控制--i变量即可，代码更清晰。

内容的提问来源于stack exchange，提问作者Zzz