簡(jiǎn)化了下背景，給定一個(gè)指標(biāo)X，比較小的時(shí)候是正常的，比較大的時(shí)候比較危險(xiǎn)。為了更直觀地地顯示，前端顯示的時(shí)候希望使用顏色來(lái)高亮這個(gè)值——比較小的時(shí)候顏色是綠色，較大的時(shí)候顯示紅色，并且用一些黃色進(jìn)行過(guò)渡。

使用google搜了搜，沒(méi)有找到合適的代碼。于是乎，露珠自己打算搞個(gè)~貽笑大方了···

顏色在HTML中可以用RGB值來(lái)表示——綠色是rgb(0,255,0), 紅色是rgb(255,0,0),黃色是rgb(255,255,0). 為了達(dá)到漸變效果，需要設(shè)計(jì)一個(gè)函數(shù)F:

F(0) = rgb(0,255,0);F(比較大的值) = rgb(255,0,0);F(中間的值) = rgb(255,255,0);

函數(shù)貌似很復(fù)雜，但是調(diào)了一會(huì)就出來(lái)了，效果來(lái)不錯(cuò)。

曬曬代碼：

/** * 生成漸變色，從綠色到紅色的漸變 * @param int   $x          指標(biāo)值 * @param int   $threshold  漸變閾值，$x等于這個(gè)值的時(shí)候剛好是黃色 * @param float $brightness 亮度，從0到1 * @return string RGB格式的顏色值 */function generateGradientColor($x, $threshold, $brightness = 1){    return sprintf('rgb(%d, %d, 0)',                    intval(min(255, ($x * 1.0 / $threshold * 255)) * $brightness),                    intval(max(0, min(255, (2 - $x * 1.0 / $threshold) * 255)) * $brightness));}

生成的漸變色的效果如下（threshold = 25）：

附生成上述效果的PHP代碼：

<style>    div{        display: block;        font-size: 10px;        height: 1em;    }</style><?phpfor ($i = 1; $i < 50; $i++){    echo strtr("<div style='width: {width}em; background-color: {color}'>$i</div>", array(        '{width}' => $i,        '{color}' => generateGradientColor($i, 25)    ));}?>

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。