进度条移动计算

Question

因为我可以在游戏中更改获胜分数，所以我希望进度条能够对其敏感。现在，它接受相对于 div 总高度的百分比。默认分数为 100 分。进度条设置为从 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; 
            }   
        }

进度条移动计算

progress bar movement calculation

html

javascript

css

progress