使用javascript动态更新div的宽度

Question

在骰子游戏中，我创建了一个简单的进度条，该进度条应动态显示玩家的进度。 功能如下：

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

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

该功能接受游戏分数，并应将其反映在进度条上。 实际发生的是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.

}