javascript - 使用javascript动态更新div的宽度

Question

在一个骰子游戏中，我创建了一个简单的进度条，用来动态显示玩家的进度。这是函数:

function gameProgress(myScore) {
    let myProgress = document.getElementById('progress');
    let id = setInterval(frame, 50);

    function frame() {
            myProgress.style.width = myScore + 'px';
    }
}

该函数接受游戏分数并应该将其反射(reflect)在进度条上。实际发生的是 div 的 style="width:"不断来回跳动显示 2px、7px、17px、22px、32px 等等。有什么办法可以解决这个问题？我希望元素仅显示最新更新的宽度而不是所有值。

Answer 1

如果您只更新一次宽度，则不必使用 setInterval。

function gameProgress(myScore) {
    let myProgress = document.getElementById('progress');
    prg.style.width = myScore + 'px'; // this should be a percentage of the actual total width of the div.

}