進度條移動計算

Question

因爲我可以更改遊戲中的獲勝分數，所以我希望進度條對它敏感。現在，它接受相對於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 + '%'; 
} 

Answer 1

你幾乎回答了你自己的問題。

既然你知道，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; 
      } 
     }