藍色到灰色在javascript中計算CSS顏色

Question

如何根據百分比值計算從藍色到淺藍灰度的div bg顏色？恩。如果該值等於100％，則div的bg顏色爲#0000FF;如果該值等於50％，則爲淺藍色;如果該值等於0，則bg顏色爲灰色。

對此有沒有算法的工作？

感謝您的任何幫助。

Answer 1

首先，您需要RGB中的十六進制值。對於這一點，你可以使用這個功能：

function hexToRgb(hex) { 
    return { 
     r: parseInt(hex.substring(1, 3), 16), 
     g: parseInt(hex.substring(3, 5), 16), 
     b: parseInt(hex.substring(5, 7), 16) 
    }; 
} 

然後，只需申請權給每個組件：

function blendColors(colorA, colorB, weight) { 
    return { 
     r: Math.floor(colorA.r * (1 - weight) + colorB.r * weight), 
     g: Math.floor(colorA.g * (1 - weight) + colorB.g * weight), 
     b: Math.floor(colorA.b * (1 - weight) + colorB.b * weight) 
    }; 
} 

Here's a demo.

Answer 2

你可以做一個JSON對象，並直接引用它，而改變顏色

var colorMap = new Object(); 
colorMap["100%"] = "#0000FF"; 
colorMap["50%"] = "lightBlue"; 
colorMap["0%"] = "gray"; 

然後用這張地圖whenevr你改回來底色

var percentageValue = '100%'; //you can pass this value inside a function also 
document.getElementById("obj").style.background-color=colorMap[percentageValue];