Question

所以我有一个颜色动态变化的页面。文本也是如此。这就是我正在使用的内容。

if (parseInt(color, 16) > 0xffffff / 2) {}

问题是代码不适用于000000，因此当我在十六进制框中输入该代码时，文本会保持黑色，使其无法读取。 Here's演示

Answer 1

isDark方法未给出正确的结果，您可以使用其他函数来检查颜色。

var getRGB = function (b) {
  var a;
  if (b && b.constructor == Array && b.length == 3) return b;
  if (a = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(b)) return [parseInt(a[1]), parseInt(a[2]), parseInt(a[3])];
  if (a = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(b)) return [parseFloat(a[1]) * 2.55, parseFloat(a[2]) * 2.55, parseFloat(a[3]) * 2.55];
  if (a = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(b)) return [parseInt(a[1], 16), parseInt(a[2], 16), parseInt(a[3],
16)];
  if (a = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(b)) return [parseInt(a[1] + a[1], 16), parseInt(a[2] + a[2], 16), parseInt(a[3] + a[3], 16)];
return (typeof (colors) != "undefined") ? colors[jQuery.trim(b).toLowerCase()] : null
};

var isDark = function (color) {
  var rgb = getRGB(color);
  if (!rgb) return null;
  return (0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]) > 180 ? false : true;
}

Fiddle Demo

Answer 2

您添加了一个属性来更改背景颜色，但不添加文本颜色。我已为您的代码添加了额外的一行。

document.body.style.color = "#" + txt_color;

希望这就是你所需要的。 http://jsbin.com/jilibabi/2

Answer 3

我已修复并清理了您的代码：Demo

// Current color
var cColor = {};

function setColor(color, dontUpdate) {
    //Change BG color 
    document.body.style.backgroundColor = "#" + color;

    //Change text color
    document.body.style.color =
        parseInt(color, 16) > 0xffffff/2
    ? 'black'
    : 'white';

    // Update HEX field
    $('.hex').val(color);

    // Only update RGB fields if needed    
    if(!dontUpdate) {
        $('.r').val(parseInt(cColor.r = color.substr(0,2), 16));
        $('.g').val(parseInt(cColor.g = color.substr(2,2), 16));
        $('.b').val(parseInt(cColor.b = color.substr(4,2), 16)); 
    }
}

// Listen to space key
$(document).keydown(function (e) {
    if (e.keyCode == '32') {
        // Generate random HEX color
        setColor(Math.random().toString(16).slice(2, 8));
    }
});

// Listen to changes in fields. Consider using "input" event instead
// of "keyup" to detect changes no produced by keyboard, e.g. pasting.
// It won't work on IE8, though.

// Change BG on input on HEX       
$('.hex').on('keyup', function () {
    setColor($(this).val());
});

// Change BG on input on RGB
$('.r, .g, .b').on('keyup', function() {
    var primary = this.className;
    this.value = Math.max(Math.min(this.value|0, 255), 0) || 0;
    cColor[primary] = hex(+this.value);
    setColor(cColor.r + cColor.g + cColor.b, true);
});

function hex(num) {
    return ("0" + num.toString(16)).slice(-2);
}

// Set default BG color
setColor('000000');

另见Colourity Demo

Answer 4

文字仍为黑色，因为您实际上并未在指定的方法中更改文字颜色。

这是不正确的，因为你在不知名的地方有文字（并且如果它开头有效则缺少分号）：

if(parseInt(color, 16) > 0xffffff/2)
{'black'
} else {
  'white';
}

为了做到这一点，我将其改为：

function updateTextColors(color) {
    //CHANGE TEXT COLOR
    if(parseInt(color, 16) > 0xffffff/2)
    {
        $("body").css('color', 'black');
    } else {
        $("body").css('color', 'white');
    }
}

请注意，为了简单显示，您可以使用jQuery作为示例。然后，您可以使用颜色调用此方法，并进行适当调整。

http://jsfiddle.net/YLeZC/3/

PS。虽然不在您的问题范围内，但您希望确保防止无效的十六进制颜色导致文本颜色更新，并为3位十六进制代码添加更好的支持。

Answer 5

您需要更新您的十六进制键盘功能，如下所示。所以当你进入＆＃34; 000＆＃34;或＆＃34; 000000＆＃34;在十六进制文本框上，文本将变为白色。如果没有，它将保持黑色。

$('.hex').keyup(function () {
var a = $(this).val();
$('#example').text(a);
console.log(a);
$('body').css('background', '#' + a);

  if(a == "000" || a == "000000")
  {
   $('body').css('color','#fff');
  }
  else
  {$('body').css('color','#000');}
function hex2rgb(a) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(a);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)

  } : null;
}

console.log(hex2rgb(a).r);
console.log(hex2rgb(a).g);
console.log(hex2rgb(a).b);


$('.r').val(hex2rgb(a).r);
$('.g').val(hex2rgb(a).g);
$('.b').val(hex2rgb(a).b);

 });

Fiddle Demo Here

根据背景更改文本。

5 个答案: