Javascript 如何更改此代码，使其从白色变为>；绿色>；黑色

我有这段代码，它生成了一个可单击的框，每当单击鼠标时，通过在绿色阴影中循环，可以从黑色-->绿色-->白色更改颜色。我需要同样的事情发生，除了盒子不是逐渐变亮，而是从白色开始逐渐变暗

var div=document.querySelector（“#myDiv”）
div.dataset.color=0；
div.addEventListener（'单击'，（）=>{
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{
宽度：200px；
高度：200px；
背景：#000000；
}

给你

<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>

#myDiv{
宽度：200px；
高度：200px；
背景：#000000；
}
var$div=document.querySelector（'div'）；
var指数=1；
$div.addEventListener（'单击'，（）=>{
颜色变异；
如果（索引==1）{
颜色=白色；
索引++
}否则如果（索引===2）{
颜色='绿色'；
索引++
}否则如果（索引===3）{
颜色='黑色'；
指数=1；
}
$div.style.background=颜色
})

若要反转有问题的过程，请从一个数组开始，该数组的值设置为

[255，255，255]

，在每次单击事件中将索引

0

和

2

处的值递减

5

，直到每个索引

0

和

2

处的值达到

0

，然后将索引

1

处的值递减

5

，直到达到

0

当

r

、

g

、

b

达到

0

时，将

g

增加到

255

，然后将

r

和

b

增加到

255

，重复上述操作

constdiv=document.querySelector（“myDiv”）；
div.dataset.color=“[255，255，255]”；
div.dataset.from=true；
常量fromWhiteToGreenToBlackAndBack=（）=>{
让[r，g，b]=JSON.parse（div.dataset.color）；
if（JSON.parse（div.dataset.from））{
如果（g！==0）{
如果（r>0）{
r=b-=5；
}否则{
g-=5；
}
}否则{
div.dataset.from=false；
}
}否则{
如果（g<255）{
g+=5；
}否则{
r=b+=5；
}
如果（r==255）{
div.dataset.from=true；
}
}
div.dataset.color=JSON.stringify（[r，g，b]）；
div.style.background=`rgb（${r}，${g}，${b}）`；
}
div.addEventListener（“单击”，从白色到绿色再到黑色）
#myDiv{
宽度：200px；
高度：200px；
背景：#ffffff；
过渡：1s背景轻松；
}
如果，第三个值从0（黑色）到50%（本例中为绿色）到100%（白色）


const div=document.querySelector（“#myDiv”）
div.dataset.color=100；
div.addEventListener（'单击'，（）=>{
div.dataset.color=Math.max（0，parseInt（div.dataset.color，10）-5）；
div.style.background='hsl（115100%，'+div.dataset.color+'%）'；
})
#myDiv{
宽度：200px；
高度：200px；
背景：#FFF；
}
以您的代码为基础，只需将
c
和
c2
倒置，然后从
255
中减去它们的结果即可得到相反的结果：


var div=document.querySelector（“#myDiv”）
div.dataset.color=0；
div.addEventListener（'单击'，（）=>{
div.dataset.color=parseInt（div.dataset.color）+5；
//反转c和c2
//c是绿色通道
//c2红色和蓝色的
var c2=Math.min（div.dataset.color%512，255）；
var c=Math.max（（div.dataset.color%512）-255，0）；
//将值从255减去，以将白色变为黑色，而不是b2w
div.style.background='rgb（'+（225-c2）+'、'+（255-c）+'、'+（255-c2）+'）；
})
#myDiv{
宽度：200px；
高度：200px；
背景：#fff；
}
我建议不要将纯js与jquery@guardio这不是jQuery…@guradio这样做没有问题。这是正确的想法，但不是只包括白色、绿色和黑色，我需要它在每次点击时循环整个绿色光谱。所以盒子开始是白色的，然后当我点击它时，它会变得稍微绿色，每次点击它都会以这种方式继续，直到盒子变暗。这是正确的想法，但我不希望盒子上有边框，我希望里面的颜色只会变为绿色的光谱。所以我希望它从白色开始，然后逐渐变成纯绿色，然后逐渐变成黑色。每次单击都应该更改颜色，但它循环的颜色应该只在正确轨迹上的绿色系列中！我需要框开始为白色，然后随着每次点击而逐渐变绿，而不仅仅是从白色变为纯绿色。所以，我需要它包括像#19ff19、#32ff32、#4cf4c、#66ff66等色调。我刚刚意识到，我需要在它被点击到纯黑色后将颜色循环回白色，这样它就可以连续点击，并循环点击，直到点击为止。@Rekigama“我刚刚意识到，我需要颜色在点击到纯黑色后循环回白色，这样它就可以连续点击，并在点击的时间内循环。”这与最初的问题有什么关系？@guest271314这是否意味着连续？（黑色到绿色到白色到绿色到黑色…）？白到绿到黑，黑到绿到白，重复。虽然该要求在链接注释中，而不是在原始问题中。OP昨天接受了该用户的答案，今天不接受，留下链接注释而不更新实际问题。决定更新代码本身的答案，尽管OP显然忽略了更新d要求。