本文介绍如何使用 PHP 动态生成带唯一标识的 HTML <progress> 元素，并结合 JavaScript（含 localStorage 持久化）为每张卡片实现独立、可恢复的进度条计时功能。
本文介绍如何使用 php 动态生成带唯一标识的 html `
在构建多卡片定时器界面时，关键挑战在于：每个卡片的进度条必须相互隔离、独立运行，且刷新或关闭页面后能从上次中断处继续。你已用 PHP 查询数据库并遍历 $row，但原始代码中所有进度条共用同一 timer1 标识，导致状态冲突。下面提供一套结构清晰、可复用的完整方案。
✅ 正确做法：为每张卡片绑定唯一 ID
假设数据库查询结果为：
while ($row = $result->fetch_row()) {
$id = $row[0]; // 唯一主键，作为进度条标识基础
$serial = $row[1];
// 其他字段...在循环中生成 HTML 时，为每个 <progress> 设置唯一 class 和 localStorage key：
<progress class="timer-progress" data-id="<?= htmlspecialchars($id) ?>" value="0" max="100"></progress> <!-- 可选：显示当前进度百分比 --> <span class="progress-label" data-id="<?= $id ?>">0%</span>
✅ 使用 data-id 属性而非动态 class 名，避免 CSS 选择器污染，更利于 JS 精准定位。
✅ JavaScript 初始化：按 ID 绑定独立定时器
将所有初始化逻辑统一收口，避免重复 $(document).ready() 和全局变量污染：
<script>
$(document).ready(function() {
// 遍历所有进度条元素，为每个分配独立定时器
$('.timer-progress').each(function() {
const $progress = $(this);
const id = $progress.data('id');
const storageKey = `timer_${id}_value`;
// 从 localStorage 恢复进度
let currentValue = parseInt(localStorage.getItem(storageKey)) || 0;
$progress.val(currentValue);
$('.progress-label[data-id="' + id + '"]').text(currentValue + '%');
// 启动专属定时器（每 360ms 增加 1%，即 100% ≈ 36 秒；可按需调整）
const intervalId = setInterval(() => {
currentValue++;
$progress.val(currentValue);
$('.progress-label[data-id="' + id + '"]').text(currentValue + '%');
localStorage.setItem(storageKey, currentValue);
if (currentValue >= 100) {
clearInterval(intervalId);
localStorage.removeItem(storageKey);
// 可在此触发完成回调，如：$progress.addClass('completed');
}
}, 360); // 注意：360ms × 100 = 36s；若需 1 分钟满格，改为 600ms
});
});
</script>⚠️ 关键注意事项
- 避免内联脚本重复执行：不要在 PHP 循环中多次输出 <script> 块——会导致多个 $(document).ready() 嵌套、定时器失控。务必将 JS 逻辑集中写在页面底部一次。
- 安全输出 PHP 变量：使用 htmlspecialchars($id) 防止 XSS，尤其当 $row[0] 可能含特殊字符时。
- localStorage 键名规范：采用 timer_{id}_value 格式，确保唯一性与可读性；避免使用 timer1_value 这类硬编码。
- 性能优化：若卡片数量较多（>50），建议用 requestAnimationFrame 替代 setInterval 实现更平滑的动画，或增加节流逻辑。
- 重置机制：如需手动重置某卡片进度，调用 localStorage.removeItem('timer_' + id + '_value') 并重置 DOM 值即可。
✅ 最终效果
每张卡片拥有：
- 独立的 <progress> 元素（通过 data-id 关联）
- 独立的 localStorage 存储键
- 独立的 setInterval 实例，互不干扰
- 页面刷新后自动恢复进度
此方案兼顾可维护性、安全性与扩展性，是 PHP + jQuery 多卡片定时器的推荐实践。
