我有一个按钮，单击时会改变颜色，但我需要它包含绿色答案

【问题标题】：I have a button that changes colors when clicked, but I need it to include the tints of green我有一个按钮，单击时会改变颜色，但我需要它包含绿色
【发布时间】：2017-10-15 22:00:41
【问题描述】：

这组代码在黑色 (#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>

例如，Tints of Green 包括#19ff19、#32ff32、#4cff4c、#66ff66、#7fff7f、#99ff99、#b2ffb2、#ccffcc、#e5ffe5 等。所有这些都不包含在由原始代码（粘贴在上面）。

【问题讨论】：

标签： javascript jquery object button colors

【解决方案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 两次，我们可以将 div.dataset.color（绿色）乘以 512。这意味着绿色值可能会高于 256；我们可以做一些逻辑来解决这个问题，但是如果放入更大的值，浏览器仍然会使用 256 的最大颜色值。无需修复它。

在获得白色后，此示例还将自动循环回黑色。为防止返回黑色，您可以执行一些逻辑以在 512 之后停止计数。

注意：我看到你使用的是 ES6 粗箭头，所以我将 rgb 字符串更新为字符串文字语法：)

【讨论】：