4

OK Stackoverflowians、これがその日のなぞなぞです。

WordPress サイトに、Google Weather API からすべてのデータを取得する天気サイドバー ウィジェットがあります。RED から BLUE へのグラデーションを設定し、JavaScript の神の魔法によって、温度の値を確認したいと思います。

数字が大きいほど赤に近く、数字が小さいほど青に
近い

これを行うことができるものはありますか？それとも、ゼロから始めなければなりませんか？

4

3 に答える 3

2

次のように、2 つの次元を使用して色を表現できます。

var max_temp = 50, // set maximum expected temperature
min_temp = -10, // set minimum temperature
temp_range = max_temp - min_temp, // calculate range
temp_rating = ((temp - min_temp) / temp_range) * 255 // express value in terms of the range multiplied by 255
red = temp_rating, // more temp = more red
blue = 255 - temp_rating; // more temp = less blue

次に、CSS の色は次のようになります。

rgb(red, 0, blue)

素敵に見えるかどうかはわかりませんが;-)

于 2012-06-22T13:20:15.943 に答える
0

これは、JavaScriptヒートマップチャートの色を生成するために作成した同様の実装からの適応のJSFiddleです。

値、最小値、および最大値を渡して範囲を定義します。次に、スクリプトで定義された最初、最後、および中点の色を指定して、16進値を補間および生成します。これは、0〜50の範囲で赤から緑になりますが、最も極端な色を提供することにより、範囲外の値も処理します。たぶんあなたはあなたの要件に合うようにこれを変更することができますか？

于 2012-06-22T13:41:32.097 に答える
0

jQueryを使用してこれを行うことができます。

$(document).ready(function(){
    $('#temp')​.change(function(){
        if($(this).val() < 47)
            $(this).removeAttr("class").addClass("cold");
        else
            $(this).removeAttr("class").addClass("hot");
    })​;
});

CSS

​.hot {background: #f00; color: #fff;}
.cold {background: #00f; color: #fff;}

HTML

​&lt;input type="text" id="temp"​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ />​​​​​​​​​​​​​​​

お役に立てれば！参考までに、フィドル。または、.keyup()関数も使用できます。:)

于 2012-06-22T13:20:24.263 に答える