javascript - 如何更改此代码，使其从白色>绿色>黑色开始？

我有这段代码可产生一个可单击的框，每当单击鼠标时，该框就会通过在绿色阴影中循环来从黑色->绿色->白色改变颜色。我需要做同样的事情，除了框要逐渐变亮之外，它要从白色开始逐渐变暗。

var div = document.querySelector('#myDiv')
div.dataset.color = 0;
div.addEventListener('click', () => {
  div.dataset.color = parseInt(div.dataset.color) + 5;
  var c = Math.min(div.dataset.color % 512, 255);
  var c2 = Math.max((div.dataset.color % 512) - 255, 0);
  div.style.background = 'rgb(' + c2 + ',' + c + ',' + c2 + ')';
})

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

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

最佳答案

通过将代码作为基础，您只需要将c和c2求反，然后从255减去它们的结果即可得到相反的结果：

var div = document.querySelector('#myDiv')
div.dataset.color = 0;
div.addEventListener('click', ()=>{
  div.dataset.color = parseInt(div.dataset.color) + 5;
  // invert c and c2
  // c is the green channel
  // c2 the red and blue ones
  var c2 = Math.min(div.dataset.color % 512, 255);
  var c = Math.max((div.dataset.color % 512) - 255, 0);
  // substract the values from 255 to get white to black instead of b2w
  div.style.background = 'rgb(' + (225 - c2) + ',' + (255 - c) + ',' + (255 - c2) + ')';
})

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

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

操作清除后，它会给出：

var div = document.querySelector('#myDiv')
div.dataset.color = 510;
div.addEventListener('click', ()=> {
  // we substract 5 at each iteration
  div.dataset.color = parseInt(div.dataset.color) - 5;
  if(div.dataset.color < 0) // negative modulo
    div.dataset.color = 510;

  var c = Math.min(div.dataset.color, 255); // green channel
  var c2 = Math.max(div.dataset.color - 255, 0); // red and blue
  div.style.background = 'rgb(' + c2 + ',' + c + ',' + c2 + ')';
});

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

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

和原始的黑色到白色：

var div = document.querySelector('#myDiv')
div.dataset.color = 0;
div.addEventListener('click', e => {
  // we add 5 at each iteration
  div.dataset.color = (parseInt(div.dataset.color) + 5) % 511;
  // This doesn't move
  var c = Math.min(div.dataset.color, 255); // green channel
  var c2 = Math.max(div.dataset.color - 255, 0); // red and blue
  div.style.background = 'rgb(' + c2 + ',' + c + ',' + c2 + ')';
});

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

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

和两个方向：

var div = document.querySelector('#myDiv')
div.dataset.color = 0;
div.dataset.inc = 5; // add an increment value which will tell us the current direction
var f = e => { // moved to an rAF loop to avoid killing our mice
  div.dataset.color = parseInt(div.dataset.color) + (+div.dataset.inc);
  if(div.dataset.color < 0 || div.dataset.color > 512){
    // change the direction
    div.dataset.inc = div.dataset.inc * -1;
    }

  // This doesn't move
  var c = Math.min(div.dataset.color, 255); // green channel
  var c2 = Math.max(div.dataset.color - 255, 0); // red and blue
  div.style.background = 'rgb(' + c2 + ',' + c + ',' + c2 + ')';
requestAnimationFrame(f);
};
f();

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

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

关于javascript - 如何更改此代码，使其从白色>绿色>黑色开始？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44014488/