需要一些技巧，如何将十六进制颜色值转换为rgb()

Need some tips with how to convert a hexadecimal color value to a rgb() one

本文关键字：转换 颜色值 十六进制 rgb      更新时间：2023-09-26

我刚开始阅读面向对象的JavaScript，并在练习中卡住了。

在第91页，它要求编写一个函数，将十六进制颜色转换为其等效的RGB(例如" RGB(0,0,255)")。它要求您拉入包括'#'在内的完整字符串。

读完他花在解释数据类型，循环，条件和函数的两章后，我不知道如何解析十六进制值而不作弊和使用某种字符串函数-他甚至没有在这一点上介绍。

有没有一种方法可以只使用他在书中演示的函数和方法来做这个练习?他要求javascript返回"rgb(0,255,0) "如果输入以下代码:

var a = getRGB("#00FF00");
a;

我假设您需要使用循环将十六进制值分解为r,g和b值的数组，然后将它们重新组合成字符串。如果可能的话，请不要给我整个解决方案，但任何有用的提示将非常感激。谢谢你的帮助。

我注意到你说没有任何字符串方法。以下是如何仅使用Array方法执行第一部分…

  • 使用split()将字符串转换为数组。
  • 将substr()呼叫交换为slice()呼叫。

然而，在现实世界中，您可以使用substr()来提取字符串的部分。第一个参数是偏移量，第二个参数是要提取的字符数。

你可以使用parseInt()来改变基数。您只需将数字(作为字符串)作为第一个参数传入，并将基数作为第二个参数传入。我选择了16的基数，因为这些是十六进制数。

然后可以将返回值与rgb(x,x,x)字符串部分连接起来，这样就可以了:)

你可以把鼠标移到下面查看代码(如果你卡住了)。顺便说一句，有谁知道如何制作块级代码扰流器吗?

<引用类>

var getRGB = function(rgb) {Var r = rgb。substr(1、2),G = rgb。substr (3,2)B = rgb。substr (5, 2);
返回的rgb(' +方法(r, 16 ) + ',' + 方法(g, 16 ) + ',' + 方法(b, 16) + ') ';}

jsFiddle .

一旦你弄清楚了这一点，下一步可能是允许函数接受浏览器允许的RGB的短格式，即你的例子#00FF00可以作为#0F0传递。

一些技巧……

  • 先用rgb.length检查字符串长度
  • 改变你的substr()呼叫依赖于长度
  • 建立你传递给parseInt()的字符串，使F成为FF。

获取输入字符串并将#替换为空，然后使用parseInt()将其解析为整数并发送16作为数字基数，现在您有一个长整数，其中前8位是蓝色值，9到16位是绿色值，17到24位是红色值。使用位移位和遮罩把它们拉出来。把它们全部放入像"rgb(r,g,b)"这样的字符串中，祝贺你，你完成了。

function parseRGB(Hex)
{
    var Word = parseInt(Hex.replace(/^#/, ""), 16);
    var R = Word >> 16 & 0xff;
    var G = Word >> 8 & 0xff;
    var B = Word & 0xff;
    return "rgb(" + R + ", " + G + ", " + B + ")";
}
var c = "#00ff00";
alert(parseRGB(c));

另一个2位方法，适合使用输入字符串

function hextoRgb(hex){
    if(/^#[a-fA-F0-9]{6}$/.test(hex)){
        var c= '0x'+hex.substring(1);
        c= [(c>> 16)&255, (c>> 8)&255, c&255];
        return 'rgb('+c.join(',')+')';
    }
    throw 'bad hex '+hex;
}

我不会因为回答了这个问题而表扬自己，但我想我应该分享一下给作者发邮件的结果(我猜现在你可以这么做!!)他给了我一个建议，下面是我按照他的要求想出来的:

function getRGB(x){
var a =[];
a[0] = parseInt(x[1] + x[2],16);
a[1] = parseInt(x[3] + x[4],16);
a[2] = parseInt(x[5] + x[6],16);
a = "rgb(" + a[0] + "," + a[1] + "," + a[2] + ")";   
return a;

}

var a = getRGB("#00FF00");,

相关文章：