JavaScriptによるプログラムグラディエントの停止

Question

2つのカラー値（たとえば、2033ffと3300a0）を指定して、Javascript（jQuery）を使用して作業しています。

0 => '000000' 
8400 => 'f0ff00' 
44000 => '2033ff' 
68400 => '3300a0' 

があり一日に86400秒であること、12：00 AMは0にマッピングされ、午後11時59分には時間が86399にマップ：ビーイングは、私は色の値の配列を使用する予定がある、ある

理由指定された要素の背景色は、グラデーションリストの適切な色にwindow.setInterval(function(e){ ... }, 1000)で変更されます。例えば、2:32:11PM = 52331は、この例からは2033ffと3300a0の間のどこかになります。

配列に値を代入する必要はありませんが（そう簡単なことがない限り）、代わりにインデックスと値を参照として使用します。

Answer 1

ただ線形補間を実行します。あなたがやるの開始と終了と

考える2033ffと3300a0を：

red1 = 0x2033ff >> 16; 
green1 = (0x2033ff >> 8) & 0xFF; 
blue1 = 0x2033ff & 0xFF; 

red2 = 0x3300a0 >> 16; 
green2 = (0x3300a0 >> 8) & 0xFF; 
blue2 = 0x3300a0 & 0xFF; 

time = 0.3 // This should be between 0 and 1 

outred = time * red1 + (1-time) * red2; 
outgreen = time * green1 + (1-time) * green2; 
outblue = time * blue1 + (1-time) * blue2; 

Answer 2

私は色にマッピング番号の一般的な解決策として、ライブラリーRainbowVis-JSを書きました。たとえば、次のように指定します。

var rainbow = new Rainbow(); 
rainbow.setSpectrum('2033ff', '3300a0'); 
rainbow.setNumberRange(1, 86400); 
var colour = rainbow.colourAt(52331); // 2c14c5