別のグラデーションカラー生成アルゴリズム_html/css_WEB-ITnose

背景

背景は簡略化されており、指標 X が比較的小さい場合は正常、比較的大きい場合は危険です。より直感的に表示するために、フロントエンドでこの値を表示するときに色を使用して強調表示したいのですが、値が小さい場合は色が緑色、大きい場合は赤色、および黄色が使用されます。移行のために。

Googleで検索しましたが、適切なコードが見つかりませんでした。それ以来、Luzhu はそれを作ることを計画しました~ ばかげています...

分析

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));}

効果

生成されたグラデーションカラーの効果は次のとおりです (しきい値 = 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)    ));}?>