jQuery

Question

我运行遇到了 Javascript/jQuery 的奇怪问题。我需要使用下面编写的函数使用 HSL 颜色模型更新背景颜色：

function updateColorPreviewHSV(hsv){
    var hue = Math.round(hsv.getHue(), 0);
    var saturation = Math.round(hsv.getSaturation()*100, 0);
    var value = Math.round(hsv.getValue()*100, 0);

    var hsvText = "hsl("+hue+","+saturation+"%,"+value+"%)";
    console.log(hsvText);
    $("#pickedColor").css({"background": hsvText });
}

给定的输出很好，但它没有改变背景颜色。 hsvText 变量的示例输出：

hsl(336,74%,100%)
hsl(340,73%,100%)
hsl(343,73%,100%)
hsl(307,73%,100%)

只有当我手动将值输入变量时才会发生变化，如下所示：

function updateColorPreviewHSV(hsv){

    var hue = 100;
    var saturation = 70;
    var value = 40;

    var hsvText = "hsl("+hue+","+saturation+"%,"+value+"%)";
    console.log(hsvText);
    $("#pickedColor").css({"background": hsvText });
}

并且有效。那么 - 为什么第一个功能不想正常工作？我哪里弄错了？

Answer 1

您的脚本运行良好。就是这样

hsl(336,74%,100%)
hsl(340,73%,100%)
hsl(343,73%,100%)
hsl(307,73%,100%)

都是白色，所以你看不出有什么区别。

http://hslpicker.com/

Answer 2

@crc442 - 你很接近，但没有解释到底哪里出错了。

感谢大家的回答，我找到了"bug"。

更清晰的解释：正如您所说 - 脚本还可以，但可视化效果不佳。我没有提到首先预览 div 已设置为白色。

HSV 和 HSL 是两种不同的颜色模型（我一开始假设它们是相同的）。 HSV 从色相到黑色，而 HSL 从白色到色相到黑色。

所以在 HSL 中，最后一个变量 100%（对于亮度）是白色的。这就是为什么我总是得到不变的背景颜色。但是当将亮度降低 50% 时，我在 HSV 模型中获得 100% 的价值，并且一切都像一个魅力:)

jQuery - HSL 彩色背景

jQuery - HSL color background

javascript

css

hsl