簡化了下背景，給定一個指標X，比較小的時候是正常的，比較大的時候比較危險。為了更直觀地地顯示，前端顯示的時候希望使用顏色來高亮這個值——比較小的時候顏色是綠色，較大的時候顯示紅色，并且用一些黃色進行過渡。

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

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

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

函數貌似很復雜，但是調了一會就出來了，效果來不錯。

曬曬代碼：

/** * 生成漸變色，從綠色到紅色的漸變 * @param int   $x          指標值 * @param int   $threshold  漸變閾值，$x等于這個值的時候剛好是黃色 * @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)    ));}?>

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。