本文讲解如何正确使用 html `
在 Web 开发中，构建多个同步或异步更新的进度条时，一个常见误区是将 <div> 伪进度条与 style.width 绑定——这不仅违背语义化 HTML 原则，还导致可访问性（a11y）缺失、样式耦合严重，且难以精确控制进度节奏。正确的做法是使用原生 <progress> 元素，并通过其 value 属性声明当前完成度（范围：0–max，默认 max=100）。
✅ 正确用法：基于 <progress> 的多进度条实现
首先，确保 HTML 结构语义清晰：
<button id="startBtn">开始执行</button> <div class="progress-container"> <progress class="linha" max="100" value="0"></progress> <progress class="linha" max="100" value="0"></progress> <progress class="linha" max="100" value="0"></progress> <!-- 更多 progress 元素 --> </div>
CSS 可统一控制外观（宽度、高度、颜色等），无需手动干预 width：
.linha {
width: 100%;
height: 8px;
border-radius: 4px;
appearance: none;
}
.linha::-webkit-progress-bar { background-color: #e0e0e0; }
.linha::-webkit-progress-value { background-color: #4caf50; border-radius: 4px; }
.linha::-moz-progress-bar { background-color: #4caf50; }? JavaScript 控制逻辑（单次点击 → 完整动画）
关键改进点：
- 移除 setInterval(fn(), delay) 错误写法（fn() 立即执行并返回 undefined，非函数引用）；
- 使用 requestAnimationFrame 或受控 setInterval + 清理机制，避免内存泄漏；
- 按需区分正向/反向进度，通过 data-direction 或索引逻辑判断；
- 所有更新仅修改 progress.value，不触碰 style.width。
示例实现（支持“点击一次，全部完成至 100%”）：
const startBtn = document.getElementById('startBtn');
const linhasProgresso = document.querySelectorAll('.linha');
const controle = 2; // 前2个正向，其余反向（按需调整）
startBtn.addEventListener('click', () => {
linhasProgresso.forEach((progress, index) => {
const isPositive = index < controle;
const targetValue = isPositive ? 100 : 0;
animateProgress(progress, progress.value, targetValue);
});
});
function animateProgress(progress, from, to) {
const duration = 800; // 动画总时长（ms）
const startTime = performance.now();
function step(timestamp) {
const elapsed = timestamp - startTime;
const progressRatio = Math.min(elapsed / duration, 1);
// 缓动函数（ease-out）
const eased = 1 - Math.pow(1 - progressRatio, 3);
const currentValue = from + (to - from) * eased;
progress.value = Math.round(currentValue);
if (progressRatio < 1) {
requestAnimationFrame(step);
}
}
requestAnimationFrame(step);
}⚠️ 注意事项与最佳实践
- 永远不要用 div + width% 替代 <progress>：它缺乏语义、屏幕阅读器无法识别、不支持 :indeterminate 状态，且不符合 WCAG 标准。
- 避免 setInterval(progressoPositivo(elem), 10) 这类错误调用：括号 () 表示立即执行，应传入函数引用 setInterval(() => progressoPositivo(elem), 10) 或使用闭包。
- 批量动画建议使用 requestAnimationFrame：比 setInterval 更平滑、更节能，且自动适配帧率。
- 重置进度条？只需 progress.value = 0，无需操作 DOM 尺寸。
- 若需动态控制最大值（如分阶段任务），可安全修改 progress.max（但需确保 value ≤ max）。
通过以上方式，你不仅能实现点击一次即驱动多个进度条精准到达目标值，还能获得更好的可访问性、维护性和性能表现。
