Question

我刚刚使用HTML十六进制颜色代码，想知道是否有任何简单的方法可以使用计划javascript计算任何颜色代码的逆数。

const hex = "#xxxxxx";
const inverseHex = "#yyyyyy";

const add = hex + inverseHex; // #000000

Answer 1

function inverse(figure) {
  // inverse a RGB color
  return ((figure & 0x000000) | (~figure & 0xFFFFFF))
}

var a = document.querySelector('#a')

var b = document.querySelector('#b')

var color = "#FF00FF"

var inversedColor = "#" + inverse(parseInt(color.substr(1), 16))
  .toString(16)
  .padStart(6, "0")
  .toUpperCase();
a.style.background = color;

b.style.background = inversedColor;

console.log(color, inversedColor);

<button id=a>Button A</button>

<button id=b>Button B</button>

反函数的积分：https://stackoverflow.com/a/44387888/750852

Answer 2

我的50美分：

const inv = (hex) => '#' + hex.match(/[a-f0-9]{2}/ig).map(e => (255 - parseInt(e, 16) | 0).toString(16).replace(/^([a-f0-9])$/, '0$1')).join('')

const invert = () =>
  document.querySelectorAll('circle')
    .forEach(c => 
      (hex = c.getAttribute('fill')) && 
      c.setAttribute('fill', inv(hex))
    )

console.log('#000000', inv('#000000'))
console.log('#ffffff', inv('#ffffff'))
console.log('#ff6600', inv('#ff6600'))
console.log('#fe4289', inv('#fe4289'))

body {
  background: grey
}

svg {
  width: 45px;
  height: 45px;
  display: inline-block;
  margin: 10px
}

<svg><circle cx="20" cy="20" r="20" fill="#000000"/></svg>
<svg><circle cx="20" cy="20" r="20" fill="#ffffff"/></svg>
<svg><circle cx="20" cy="20" r="20" fill="#ff6600"/></svg>
<svg><circle cx="20" cy="20" r="20" fill="#fe4289"/></svg>

<p><button onclick="invert()">Invert!</button></p>

Javascript。查找十六进制代码的逆

2 个答案: