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>

例如，Tints of Green包括＃19ff19，＃32ff32，＃4cff4c，＃66ff66，＃7fff7f，＃99ff99，＃b2ffb2，＃ccffcc，＃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两次，我们可以将div.dataset.color（绿色）模数为512.这意味着绿色值可以高于256;我们可以做一些逻辑来解决这个问题，但是如果放入更多的东西，浏览器仍会使用256的最大颜色值。无需修复它。

此示例也会在达到白色后自动循环回黑色。为了防止回到黑色，你可以做一些逻辑来在512之后停止计数。

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

我有一个按钮，点击时会改变颜色，但我需要它包含绿色的色调

1 个答案: