js的3种方法和颜色格式的转换实现随机色

前言

我相信你们都知道有在前端的颜色表示方法很多，一个是3或6个十六进制数，一个是RGB数字形式，和其他颜色的英语直接表达的。这三个都不是由透明色的支持。所以这是一个RGBA的表格样式，在RGB基础上添加透明度使网络更加复杂和华丽的。

随机颜色

在《农夫法典》的日常工作中，我们经常使用随机颜色的地方。下面是几种实现随机颜色的简单方法。

十六带格式（# 000000 # ffffff）

第一种方法比较简单。该方法首先随机产生的16位数在ffffff，然后确定的比特数，小于6位，并采用循环加0到0。
功能（randomhexcolor）{ / /随机生成的十六进制颜色
VaR进制= math.floor（数学。随机）（* 16777216），ToString（16）； / / ffffff内生成16进制数
而（hex.length＜6）{ / /循环决定的十六进制数字，不足6位加0位和6位
六= 0+六；
}
返回的# +进制； / / #回报在16进制颜色开始
}
还有一个更方便，但很难理解的方法，它需要在适当的地方使用。
功能（randomhexcolor）{ / /随机生成的十六进制颜色
#（收益+00000+（数学。随机）* 0x1000000（＜0）。ToString（16）），Substr（6）；
}
按执行顺序可分为以下六个步骤：

先执行Math.random（）* 0x1000000，哪里0x1000000 = 0xffffff + 1，由于Math.random（）不到1，所以1将在1-16777216生成一个浮点数（不包括在内）。
然后，在舍入操作后面的< 0的实现，删除小数点。这是十进制数为16777216（不包括）。
然后the.tostring（16）被执行，和十进制数转换为六位的16位数。
然后，00000+再次执行，因为前面生成的16个十进制数可能只有一个位，前面有5个0位。
最后的执行。Substr（6）都是字符串，从6，即回，最后6位数字。
添加#和退货。

RGB格式
功能randomrgbcolor（RGB）{ / /颜色随机
VAR r = math.floor（数学。随机）（×256）； / /在256 R值随机生成
var g = math.floor（数学。随机）（×256）； / /在256 g值随机生成
var b = math.floor（数学。随机）（×256）； / /在256 B值随机生成
返回RGB（$，}，$ }，RGB，RGB）；返回（R，G，B颜色格式）
}
RGBA格式
功能randomrgbacolor（RGBA）{ / /颜色随机
VAR r = math.floor（数学。随机）（×256）； / /在256 R值随机生成
var g = math.floor（数学。随机）（×256）； / /在256 g值随机生成
var b = math.floor（数学。随机）（×256）； / /在256 B值随机生成
var = Math.random（α）； / /在1值随机生成
返回` RGB（$ {红}，{一}美元，$ {黑}，{α}美元，RGBA）； / /返回（R，G，B，颜色格式）
}
颜色格式转换

在编码过程中，经常会遇到的问题会相互转化颜色格式，包括十六进制格式和RGB格式可以转换为RGBA格式，但由于alpha属性之前是没有透明，所以改造将失去第一个alpha值变换是不推荐的，这里是我的颜色转换：

十六RGB
功能hex2rgb（HEX）{ / /十六进制RGB
var；
如果（ / ^ # { 0-9a-f } { 3 } $ / i.test（HEX））{ / /判断输入的#三位十六进制数
让sixhex =#；
hex.replace（ / / } { 0-9a-f Ig的功能（KW）{
sixhex =千瓦+千瓦； / /三位16进制数为六
}）；
六= sixhex； / /救回来的六
}
如果（ / ^ # { 0-9a-f } { 6 } $ / i.test（HEX））{ / /判断输入的#六位十六进制数
hex.replace（ / { 0-9a-f } { 2 } / Ig的功能（KW）{
Rgb.push（eval（'0x +千瓦））； / /十六进制转换为十进制并存如阵列
}）；
返回` RGB（$ { rgb.join（）}）； / / RGB格式输出的颜色
{人}
console.log（`输入$ {六}是错误的！）；
return'rgb（0,0,0）；
}
}
RGB被转换为十六
功能rgb2hex（RGB）{
如果（ / ^ RGB （（ 3 D { }，）{ 2 } D { 1,3 } ） / i.test（RGB））{ / /测试RGB
# VaR进制= '； / /定义十六进制颜色可变
rgb.replace（ / D { 1,3 } / g，功能（KW）{ / / RGB数字提取
千瓦= parseInt（千瓦）。ToString（16）； / /十六229
千瓦= kw.length＋20＜千瓦：千瓦； / /两位数的判断，保证
十六进制=千瓦；
}）；
返回十六进制；返回十六进制十六
{人}
console.log（`输入$ { RGB }是错误的！）；
返回的# 000； / /输入格式错误，返回# 000
}
}
总结

以上就是本文的全部内容。这也是我平时遇到的颜色问题。你会遇到什么奇怪的问题和解决办法希望本文的内容能对大家的学习或工作有所帮助。