如何用JavaScript函数实现进度条数值每隔3秒递增？

原代码存在的问题 #

• 变量x未在定时器内递增，导致进度条始终停在10，无法持续增长
• 未设置进度条的max属性，浏览器默认最大值为1，会直接显示满格
• 缺少定时器终止逻辑，进度到100后仍会持续触发

完整实现代码 #

HTML结构

<button onclick="download()">开始下载</button>
<progress value="0" max="100"></progress>

JavaScript代码

function download() {
    let x = 0;
    const progressBar = document.getElementsByTagName('progress')[0];
    // 重置进度条为初始状态
    progressBar.value = 0;
    
    const increase = setInterval(() => {
        x += 10;
        // 控制进度不超过最大值，到达后停止定时器
        if (x >= progressBar.max) {
            x = progressBar.max;
            clearInterval(increase);
        }
        progressBar.value = x;
    }, 3000);
}

关键修正说明 #

• 缓存进度条DOM元素，避免重复查询DOM提升性能
• 点击按钮时重置进度条，支持多次触发下载操作
• 在定时器内递增x，保证进度持续增长
• 增加进度上限判断，到达最大值后自动停止定时器，避免无效执行

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