如何为多个元素构建可控的进度条系统

1. 函数被立即执行：progressoPositivo(linhaProgresso) 在 setInterval 参数中已带括号，导致函数立刻调用并返回 undefined，而非传入函数引用；
2. 状态共享错误：所有进度条共用全局变量 width，无法独立控制各条进度。

✅ 正确做法是：

• 使用标准 标签（语义清晰、屏幕阅读器友好、无需手动样式适配）；
• 通过 value 属性控制当前进度（范围 0–max，默认 max=100）；
• 为每个进度条维护独立状态（如封装为对象或使用 dataset）；
• 使用 requestAnimationFrame 或受控 setTimeout 实现平滑、可中断的动画，而非无节制的 setInterval。

以下是完整可运行示例：

ISite企业建站系统1.2.3

ISite企业建站系统是为懂点网站建设和HTML技术的人员（例如企业建站人员）而开发的一套专门用于企业建站的开源免费程序。本系统采用了全新的栏目维护模式，内容添加过程中，前后台菜单是一样的，需要维护前台某个栏目的内容，只需要进后台相应栏目即可，一般的企业人员只需要查看简易的说明就可以上手维护网站内容。通过自由度极高的模板系统，可以适应大多数情况的界面需求，后台带有标签生成器，建站只需要构架好HTM

下载

开始执行

// JavaScript
const linhasProgresso = document.querySelectorAll('.linha');
const startBtn = document.getElementById('startBtn');
const controle = 2; // 前2个正向，第3个反向（示例逻辑）

function animateProgress(progressEl, targetValue, direction = 1, step = 1, delay = 16) {
  const currentValue = progressEl.value;
  const nextValue = direction > 0 
    ? Math.min(targetValue, currentValue + step) 
    : Math.max(targetValue, currentValue - step);

  progressEl.value = nextValue;

  if (direction > 0 ? nextValue < targetValue : nextValue > targetValue) {
    requestAnimationFrame(() => 
      animateProgress(progressEl, targetValue, direction, step, delay)
    );
  }
}

startBtn.addEventListener('click', () => {
  linhasProgresso.forEach((linha, index) => {
    const target = index < controle ? 100 : 0;
    const direction = index < controle ? 1 : -1;
    animateProgress(linha, target, direction);
  });
});

⚠️ 注意事项：

• 不要使用 setInterval 驱动逐帧动画——它不与屏幕刷新同步，易造成卡顿或过度绘制；requestAnimationFrame 是更优选择；
• 的 value 必须在 [0, max] 范围内，超出将被忽略；
• 若需自定义样式，应通过 CSS 伪元素（如 progress::-webkit-progress-bar）实现，而非覆盖 width；
• 如需暂停/重置，可在动画函数中加入状态标记（如 isAnimating），或使用 AbortController 管理异步流程。

总结：真正的进度条不是“视觉容器变宽”，而是“任务完成度的数值表达”。用 value 驱动、用 requestAnimationFrame 控制、用独立状态管理，才能构建健壮、可维护、符合 Web 标准的多进度条系统。