javascript - 我如何更改此代码,使其从白色>绿色>黑色?

标签 javascript html css colors

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

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>

最佳答案

以您的代码为基础,您只需将 cc2 取反,然后用 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/

相关文章:

javascript - 将列内容与单元格右侧对齐 React MUIDataTable

javascript - Redux 获取操作

jquery - 谷歌 XML 建议

html - 如何创建两个 li 样式?

javascript - 想调用 div 但换行 javascript ajax

php - 使用下拉列表 php 或 javascript 中的多个项目填充文本框

php - 将 html 保存在数据库中而不进行清理然后像 stackoverflow 一样在代码标记中显示它是否安全?

javascript - 获取表中的tr索引

javascript - 具有过滤值的 jQuery 目标选择器属性并添加新类

javascript - 在 iOS 上加载时网页向下滚动一半