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

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 检查以检查生成的整数是否有效，这与您现在的做法相反。