我正在嘗試的內容 我正在從一個 API 中提取一個 1 到 32 之間的數字。我試圖將回傳值轉換為某種背景顏色，范圍從綠色到紅色，分別為好到壞。基本上，如果回傳的數字是 32，背景會變成鮮紅色，如果是 1，它會回傳鮮綠色。
我試過的
這是目前的代碼。
function colorChange(x) {
let y = x.substring(0, x.length - 2); <<<----THIS IS TO TAKE THE NUMBER FROM 32ND TO JUST 32.
let z = y / 2
return "#" z z z
}
<div
className="team-stat"
style={{backgroundColor: colorChange(teamStats.stats[1].splits[0].stat.pts)}}
>
<h4>Points:</h4>
<h1>{teamStats.stats[0].splits[0].stat.pts}</h1>
<h3>Rank: {teamStats.stats[1].splits[0].stat.pts}</h3>
</div>
目前在代碼中，我正在呼叫一個 API，結果從 1 到 32。我已經去掉了最后兩個字符，所以沒有包含 th 或 nd。我設法做到了，所以它基本上回傳了#171717 的十六進制代碼，但當前范圍從黑色到稍微少一點的黑色。隨著十六進制代碼變成字母，我對如何繼續感到有些困惑。任何幫助表示贊賞，我很樂意澄清任何誤解。
uj5u.com熱心網友回復：
使用HSLA 模型作為背景顏色。然后根據您的值將第一個引數（色調）從 1 更改為 32 乘以 3.75 (120/32)
這是一個例子：https : //codepen.io/akost/pen/ZEJWZVx
<script>
let list='';
for(let i = 1; i <= 32; i ) {
let h = i*3.75; // we need hue values from 0 to 120
let row = `<div style='background:hsla(${h}, 100%, 50%, 1)'></div>`;
list = row;
}
document.getElementById('foo').innerHTML = list;
</script>
<style>
#foo div {
width:100px;
height:10px;
border-bottom:solid 1px #fff;
}
</style>
<div id="foo"></div>
uj5u.com熱心網友回復：
您可以使用rgb()背景顏色，然后根據值縮放紅色和綠色值x。假設 32 是最綠色的，例如：
function colorChange(x) {
...
const maxPossibleScore = 32;
const individualPointValue = 255 / maxPossibleScore;
return {
red: 255 - individualPointValue * x,
green: individualPointValue * x
}
}
const colors = colorChange(10);
style={{backgroundColor: `rgb(${colors.red}, ${colors.green}, 0)`}}
這不會直接使用十六進制回答您的問題，但理論上您可以插入十進制到十六進制的翻譯并獲得您正在尋找的十六進制結果。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/323441.html
標籤：javascript 反应
上一篇：如何正確應用Box組件間距道具？
下一篇：我們如何將顏色作為道具傳遞？