进度条移动计算

-2

因为我可以更改游戏中的获胜分数，所以我希望进度条对它敏感。现在，它接受相对于div的总高度的百分比。默认分数是100pts。进度条设置为从0％（分钟）〜100％（最大）（即100分钟） - 获胜分数。可否告诉我一些想法，如何编程进度条，当用户输入胜利分数，例如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 + '%'; 
}

来源

2017-08-24 holler

'progBarId.style.height =（（将myScore/winningScore）* 100）+ '％';' –

当你不能数学FeelsBadMan – user5014677

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

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

这样，您可以通过简单的100乘以和向你个百分点。

0.5 * 100 = 50

正如约翰·卡尔松指出，你只需用以下内容替换您的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; 
      } 
     }

来源

2017-08-24 11:31:57 Johannes

进度条移动计算

回答

相关问题