クリックしたときに色が変わるボタンがありますが、緑の色合いを含める必要があります

Question

このコードセットは、黒（＃000000）と純粋な緑（＃00ff00）の間を循環します。しかし、私は白を通って緑の色合いを含める必要があります。だから、ボタンが十分にクリックされ、純粋な緑色（＃00ff00）が表示されたら、白（#ffffff）が表示されるまで、色合いを循環し続けるには何が必要ですか？例えば

var div = document.querySelector('#myDiv') 
div.dataset.color = 0; 
div.addEventListener('click',()=>{ 
div.dataset.color = parseInt(div.dataset.color)+10; 
var c = div.dataset.color%256; 
div.style.background = 'rgb(0,'+c+',0)'; 
}) 

#myDiv { 
width: 200px; 
height: 200px; 
background: #000000; 
} 

<div id="myDiv"></div> 

、グリーンの色合いはに含まれていないすべてが等＃19ff19、＃32ff32、＃1 4cff4c、＃66ff66、＃1 7fff7f、＃99ff99、＃1 b2ffb2、#ccffcc、＃1 e5ffe5を含みます元のコードで提示された色（上に貼り付けられています）。

Answer 1

緑色になると、赤と青を均等に増やして白い色調を増やすことができます。通過する256の* 2の色合いを持つものとして考えて：黒から緑に256の階調と256の階調緑から白へ：

var div = document.querySelector('#myDiv') 
div.dataset.color = 0; 
div.addEventListener('click',() => { 

    div.dataset.color = parseInt(div.dataset.color) + 10; 

    var c = div.dataset.color % 512; 
    var rb = c - 256 > 0 ? c - 256 : 0; // gets 'overage' of values past 256; 

    div.style.background = `rgb(${rb},${c},${rb})`; 
}); 

#myDiv { 
width: 200px; 
height: 200px; 
background: #000000; 
} 

<div id="myDiv"></div> 

この例では、我々は10で各クリックを緑の値をステップアップされており、 256を超えるクリックごとに、赤と青の両方に10を追加します。これは、色合いの間で同じ増分を維持する必要があります。

基本的に256を2回カウントする必要があるため、div.dataset.color（緑色）を512でモジュロすることができます。つまり、緑の値が256より高くなる可能性があります。これを修正するためにいくつかのロジックを行うことができますが、それ以上のものがあればブラウザは最大カラー値256を使用します。修正する必要はありません。

この例では、白になった後も自動的に黒に戻ります。バック黒に行くのを防止するために、あなたは512

ノートの後にカウントを停止するためにいくつかのロジックを行うことができます：私はあなたが私は、文字列リテラル構文:)

にRGB文字列を更新しES6脂肪の矢印を使用していた見ました