如何为多个元素构建可控的进度条系统_技术教程

本文讲解如何正确使用 html `` 元素实现多进度条联动控制，避免直接操作 `style.width` 的常见错误，通过 `value` 属性驱动进度更新，并支持单次点击按钮完*部进度动画。

在构建多元素进度条时，一个关键误区是将

类进度条（通过 CSS width 模拟）与语义化、可访问、原生支持的元素混淆。你提供的代码中，linhasProgresso 被当作普通 DOM 元素处理，反复调用 setInterval(progressoPositivo(linhaProgresso), 10) —— 这里存在两个严重问题：

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

✅ 正确做法是：

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

以下是完整可运行示例：

// 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);
  });
});