JS实现随机颜色的3种方法与颜色格式的转化
前言
相信大家都知道在前端的颜色表示方式有多种，一种是以3个或6个十六进制的数子表示，一种是RGB的数字形式，还有一种是直接以颜色的英文来表示。这三种都是不支持透明色的。所以还有RGBA的表式方式，在RGB的的基础上加入了Alpha透明，使网页可以展现更加复杂绚丽的效果。
随机颜色
在平时的码农日常中，经常会用到求随机颜色的地方，下面是我总结的几种简单的实现随机颜色的方式：
十六进制格式（#000000-#FFFFFF）
第一种是比较简单的方法，这种方法是先随机生成ffffff以内16进制数，然后判断位数，少于6位的用while循环在前面加0，凑够6位。
functionrandomHexColor(){//随机生成十六进制颜色
varhex=Math.floor(Math.random()*16777216).toString(16);//生成ffffff以内16进制数
while(hex.length<6){//while循环判断hex位数，少于6位前面加0凑够6位
hex='0'+hex;
}
return'#'+hex;//返回‘#'开头16进制颜色
}
还有一种比较方便但是比较难懂的方法，需要用到位运算。
functionrandomHexColor(){//随机生成十六进制颜色
return'#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6);
}
按执行顺序可以分为以下六步：
- 先执行Math.random()*0x1000000，其中0x1000000=0xffffff+1，因为Math.random()取不到1，所以+1，这样就会生成一个1-16777216(不包含)以内的浮点数。
- 然后执行<<0，这是取整运算，去掉后面的小数点。这时为一个16777216(不包含)以内的十进制数。
- 之后执行.toString(16)，把十进制数转化为六位以下16进制数。
- 再后执行'00000'+，这时因为之前生成的16进制数最少可能仅一位，在前面加上5个0。
- 最后执行.substr(-6)，是去从-6开始的后面所有字符串，也就是最后6位数。
- 前面加上#并retuen。
RGB格式
functionrandomRgbColor(){//随机生成RGB颜色
varr=Math.floor(Math.random()*256);//随机生成256以内r值
varg=Math.floor(Math.random()*256);//随机生成256以内g值
varb=Math.floor(Math.random()*256);//随机生成256以内b值
return`rgb(${r},${g},${b})`;//返回rgb(r,g,b)格式颜色
}
RGBA格式
functionrandomRgbaColor(){//随机生成RGBA颜色
varr=Math.floor(Math.random()*256);//随机生成256以内r值
varg=Math.floor(Math.random()*256);//随机生成256以内g值
varb=Math.floor(Math.random()*256);//随机生成256以内b值
varalpha=Math.random();//随机生成1以内a值
return`rgb(${r},${g},${b},${alpha})`;//返回rgba(r,g,b,a)格式颜色
}
颜色格式转化
在编码过程中，经常会遇到要将颜色格式相互转化的问题,其中十六进制格式和RGB格式是可以相互转化的，但是RGBA格式由于多了前两者没有的Alpha透明属性，所以和前两者转化会丢失Alpha值，不建议进行转化，下面是我的颜色转化的方法：
十六进制转为RGB
functionhex2Rgb(hex){//十六进制转为RGB
varrgb=[];//定义rgb数组
if(/^\#[0-9A-F]{3}$/i.test(hex)){//判断传入是否为#三位十六进制数
letsixHex='#';
hex.replace(/[0-9A-F]/ig,function(kw){
sixHex+=kw+kw;//把三位16进制数转化为六位
});
hex=sixHex;//保存回hex
}
if(/^#[0-9A-F]{6}$/i.test(hex)){//判断传入是否为#六位十六进制数
hex.replace(/[0-9A-F]{2}/ig,function(kw){
rgb.push(eval('0x'+kw));//十六进制转化为十进制并存如数组
});
return`rgb(${rgb.join(',')})`;//输出RGB格式颜色
}else{
console.log(`Input${hex}iswrong!`);
return'rgb(0,0,0)';
}
}
RGB转为十六进制
functionrgb2Hex(rgb){
if(/^rgb\((\d{1,3}\,){2}\d{1,3}\)$/i.test(rgb)){//testRGB
varhex='#';//定义十六进制颜色变量
rgb.replace(/\d{1,3}/g,function(kw){//提取rgb数字
kw=parseInt(kw).toString(16);//转为十六进制
kw=kw.length<2?0+kw:kw;//判断位数，保证两位
hex+=kw;//拼接
});
returnhex;//返回十六进制
}else{
console.log(`Input${rgb}iswrong!`);
return'#000';//输入格式错误,返回#000
}
}
总结
以上就是这篇文文章的全部内容了，也是我在平时遇到的关于颜色处理方面的问题，大家有遇到什么奇怪的问题和更好的解决方法可以交流沟通一下。希望本文的内容对大家的学习或者工作能带来一定的帮助。