Question

我有这一块代码可以生成一个可以在黑色中改变颜色的可点击框 - ＆gt;绿色 - ＆gt;只要点击鼠标，就可以通过绿色阴影循环显示白色。我需要做同样的事情，除了逐渐变淡之外，盒子从白色开始逐渐变暗。

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>

Answer 1

以您的代码为基础，您只需要反转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>

Answer 2

你在这里！

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

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

</style>

<script>
  var $div = document.querySelector('div');
  var index = 1;

  $div.addEventListener('click', () => {
    var color;

    if (index === 1) {
      color = 'white';
      index++
    } else if (index === 2) {
      color = 'green';
      index++
    } else if (index === 3) {
      color = 'black';
      index = 1;
    }

    $div.style.background = color

  })
</script>

Answer 3

要反转Question的过程，请从值为[255, 255, 255]的数组开始，在每个点击事件中按0减少2和5的值在每个索引0和0的值达到2之前，然后将1的索引值减去5，直到达到0。

当0，r，g达到b后，g增加到255，然后递增r和b到255，重复。

const div = document.querySelector("#myDiv");
div.dataset.color = "[255, 255, 255]";
div.dataset.from = true;
const fromWhiteToGreenToBlackAndBack = () => {
  let [r, g, b] = JSON.parse(div.dataset.color);
  if (JSON.parse(div.dataset.from)) {
    if (g !== 0) {
      if (r > 0) {
        r = b -= 5;
      } else {
        g -= 5;
      }
    } else {
      div.dataset.from = false;
    }
  } else {
    if (g < 255) {
      g += 5;
    } else {
      r = b += 5;
    }
    if (r === 255) {
      div.dataset.from = true;
    }
  }
  div.dataset.color = JSON.stringify([r, g, b]);
  div.style.background = `rgb(${r},${g},${b})`;
}
div.addEventListener("click", fromWhiteToGreenToBlackAndBack);

#myDiv {
  width: 200px;
  height: 200px;
  background: #ffffff;
  transition: 1s background ease;
}

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

Answer 4

如果you can use hsl()，第三个值从0（黑色）变为50％（在这种情况下为绿色）到100％（白色）

const div = document.querySelector('#myDiv')
div.dataset.color = 100;
div.addEventListener('click', () => {
  div.dataset.color = Math.max(0, parseInt(div.dataset.color, 10) - 5);
  div.style.background = 'hsl(115, 100%, '+div.dataset.color+'%)';
})

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

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

如何更改此代码，使其从白色＆gt;绿色＆gt;黑色变为？

4 个答案: