如何将JavaScript生成的随机数填入DIV进度条的宽度属性和内容区域

你只需要调整2处代码即可完成需求：

1. 给目标进度条DIV添加唯一ID，方便JS定位元素，修改后的DIV代码如下：

<div id="progressBar" class="progress-bar" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0</div>

2. 调整原有JS逻辑，将生成的随机数先存入变量，同时更新元素的宽度属性、展示内容和无障碍属性，避免两次生成随机数导致数值不一致，修改后的JS代码如下：

var i = 0,
    howManyTimes = 500,
    // 提前获取进度条元素，避免每次循环都查询DOM
    progressBar = document.getElementById('progressBar');

function f() {
    // 生成一次随机数存入变量，保证两处使用的数值完全一致
    const randomVal = Math.floor(Math.random() * 5) + 93;
    // 更新宽度
    progressBar.style.width = randomVal + '%';
    // 更新展示内容
    progressBar.innerHTML = randomVal;
    // 同步更新无障碍属性，符合规范要求
    progressBar.setAttribute('aria-valuenow', randomVal);
    
    i++;
    if (i < howManyTimes) {
        setTimeout(f, 2000);
    }
}
f(); // 启动循环

核心说明 #

• 随机数仅生成一次存入变量，可完全避免宽度和显示数值不一致的问题
• 提前查询DOM元素缓存，比每次循环调用getElementById性能更好，频繁更新的场景下优势更明显
• 同步更新aria-valuenow属性保证无障碍兼容性，屏幕阅读器可正确识别当前进度值

内容的提问来源于stack exchange，提问作者Erick Amoedo