Question

因为我可以改变游戏中的获胜分数，所以我希望进度条对它敏感。现在，它接受相对于div总高度的百分比。默认分数为100pts。并且进度条设置为从0％（min）~100％（max）移动，即100pts - 获胜分数。你能否告诉我一些如何设置进度条的想法，当用户输入获胜分数时，例如50分将是100％（最大），然后当玩家达到25分时，进度条将显示他＆赢得比赛的中途（50％）。我希望我的解释清楚。

HTML输入：

<input class="score-input" type="text">

用于设置获胜分数（默认为100）

function setWinningScore() {
        let inputScore = document.querySelector('.score-input').value;
            if (inputScore) { 
                winningScore = inputScore;
            } else {
                winningScore = 100; 
            }   
        }

进度条功能，可以读取玩家的得分，进度条元素的ID，然后反映出来。

function progressBar(myScore, progBarId) {
    progBarId.style.height = myScore + '%';
}

Answer 1

你几乎回答了自己的问题。

既然你知道50％中的25％是50％，那么你也应该知道25/50 = 0.5

有了这个，你可以简单地将它乘以100，这就是你的百分比。

0.5 * 100 = 50

正如Johan Karlsson指出的那样，您只需将progressBar函数替换为以下内容：

function progressBar(myScore, progBarId) {
    progBarId.style.height = ((myScore / winningScore) * 100) + '%';
}

我想补充一点，你也应该通过确保给定的输入是有效的正数来使你的setWinningScore函数更安全一些，否则你会遇到一些问题。

function setWinningScore() {
        let inputScore = document.querySelector('.score-input').value;
            if (typeof inputScore === 'number' && inputScore > 0) { 
                winningScore = inputScore;
            } else {
                winningScore = 100; 
            }   
        }

进度条运动计算

1 个答案: