我有这段代码可以生成一个可点击的框,只要单击鼠标,它就会通过在绿色阴影之间循环来改变颜色,从黑色 --> 绿色 --> 白色。我需要同样的事情发生,除了盒子不是逐渐变亮,而是从白色开始逐渐变暗。
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/