设置默认颜色而不会弄乱页面

Question

所以我有一个将RGB转换为HEX的脚本，反之亦然。但是当我加载页面时，背景是黑色的。所以我去了我的代码中的相应部分，如下所示。

function update() {
    var red = parseInt($(".r").val(), 10);
    var green = parseInt($(".g").val());
    var blue = parseInt($(".b").val());
    red = red || 255;
    green = green || 255;
    blue = blue || 255;
    var rgb = RGB2HTML(red, green, blue);
    $(".hex").val(rgb);
   $("body").css("background", rgb);
}

我改变了

red = red || 0;
green = green || 0;
blue = blue || 0;

到

red = red || 255;
green = green || 255;
blue = blue || 255;

现在，当我0, 157, 255时，我得到了这个

所以我回到默认的0。当我输入相同的RGB时，我得到了这个

所以我的第一个问题是，如何在不弄乱整个脚本的情况下选择自己的背景进行初始启动。我的第二个问题是当我输入带有#前缀的HEX时。剧本不会运行。这就是我的期望。但是当我将RGB转换为HEX时，它会在HEX字段中放置#。所以我想防止这种情况发生。 Here's黑色背景的演示。有什么想法吗？

Answer 1

在JavaScript的底部，您有：

$(function () {
    $('.r, .g, .b').keyup(update);
    update();
});

这正在运行update();，用于设置背景颜色。您可以删除该行，并将CSS中的body颜色添加到您喜欢的颜色。

body {
  color:#f00;
  transition: 1s;
}

其次，当您更改RGB值时，正在使用输入中的＃更新十六进制值，因为您明确设置了该值。在update()中，您调用RGB2HTML()执行并将十六进制输入设置为：

return '#' + hex(red) + hex(green) + hex(blue);

删除它，然后你可以在update（）的最后一行添加它，这样输入就不会得到它，但是在设置背景时会包含它。

$("body").css("background", "#" + rgb);

http://jsbin.com/ziyicebo/2

就粉红/蓝色问题而言，它不起作用的原因是因为您设置了不同的颜色。到达时：

red = red || 255;

输入后，

红色变为255而不是0。在另一个例子中，r仍为0. r = 0的颜色与r = 255不同。您可以执行isNaN检查以检查结果整数是否有效，而不是现在如何进行。

Answer 2

更改它以执行此操作以修复第一个问题：

red = isNaN(red) ? 255 : red;
green = isNaN(green) ? 255 : green;
blue = isNaN(blue) ? 255 : blue;

对于第二个问题，将RGB2HTML更改为不返回＆＃39;＃＆＃39;：

function RGB2HTML(red, green, blue) {
    return hex(red) + hex(green) + hex(blue);
}

然后将$("body").css("background", rgb);更改为前置＆＃39;＃＆＃39;：

$("body").css("background", '#' + rgb);