1

特定のパーセンテージに基づいて3色の平均を計算するにはどうすればよいですか？

たとえば、緑、黄、赤があり、平均値を取得したいとします。

これを行う最も簡単な方法は、次のような画像を作成することです。

ここに画像の説明を入力してください

そして、増減しbackground-positionます：

$('input').change(function(){
    $('#color').css({
        backgroundPosition: -this.value + "px 0"
    });
});

http://fiddle.jshell.net/VY4D8/

...しかし、それは出力を使って、または出力として「より良く」行うことができると思います。rgb/ahex

解釈の目的のためだけに：

  • ** [0％] |#ff0000
  • -[1％]
  • -[2％]
  • -[3％]
  • -[4％]
  • -[5％]
  • -[...]
  • ** [11％] |#ffc600
  • -[12％]
  • -[13％]
  • -[14％]
  • -[15％]
  • -[16％]
  • ** [17％] |#ffee00
  • ...等...

この問題の実装はすでにありますか、または過去に何かを書いたことがありますか？

アップデート

イーブイのおかげで、了解しましたhttps://stackoverflow.com/a/15125778/1250044：

var div = document.getElementsByTagName('div')[0];

$('input').change(function () {

    var max = this.getAttribute("max"),
        cur = this.value / max * max,
        r = Math.min(cur * 2, max),
        g = Math.min(max * 2 - cur * 2, max),
        rgb = g + "%, " + r + "%, 0%";

    div.style.backgroundColor = "rgb(" + rgb + ")";

}).change();

http://fiddle.jshell.net/VY4D8/1/

4

2 に答える 2

2

数学をしますか？

あなたが持っている：

  • 0％で、赤：rgb(100%, 0%, 0%)
  • 50％で、黄色：rgb(100%, 100%, 0%)
  • 100％で、緑：rgb(0%, 100%, 0%)

11％で色を把握したい場合：

  1. それがどのセクションに属しているかを把握します。全スペクトルの11％は、赤と黄色の間の22％にあります。

  2. rgb(100%, 78%, 0%)補間：赤の22％と黄色の78％がまたはに出てき#ffc600ます。

于 2013-02-28T01:19:09.483 に答える
-1

あなたはそのCSSを行うことができますlinear-gradient。

デモ： http： //jsfiddle.net/ThinkingStiff/Jqdkq/

CSS：

.gradient {
    background: linear-gradient(
        to right, 
        red, yellow, green
        );
    height: 20px;
    width: 300px;
}

HTML：

<div class="gradient"></div>
于 2013-02-28T00:44:37.943 に答える