LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

[点晴永久免费OA]JS将十六进制颜色转rgb以及加深减淡颜色值

admin
2023年4月12日 9:39 本文热度 918

十六进制颜色值转rgb
Javascript颜色转换的核心就是进制间的转换。RGB格式其实就是十进制表示法,所以,十六进制颜色与RGB颜色的转换就是十六进制与十进制之间的转换。

十六进制转换为十进制相对容易些,核心代码如下示例:parseInt("0xFF"),其结果就是255,”0x”就表明当前是16进制,由于parseInt后面无参数,默认就是转换为10进制了。

十进制转换为16进制,核心代码如下:var num=255; num.toString(16);,其结果是FF。”16″表示数值转换为16进制字符串。

function colorRgba(str,n){
	//十六进制颜色值的正则表达式
	var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
	var sColor = str.toLowerCase();
	n= n||1;
	//十六进制颜色转换为RGB格式
    if(sColor && reg.test(sColor)){
        let sColorChange=getRgbNum(sColor);
		return "rgba(" + sColorChange.join(",") + ","+n+")";
    }else{
        return sColor;
    }}function getRgbNum(sColor){
	if(sColor.length === 4){
       var sColorNew = "#";
       for(var i=1; i<4; i+=1){  //补全颜色值 例如:#eee,#fff等
           sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));
       }
       sColor = sColorNew;
    }
    //处理六位颜色值
    var sColorChange = [];
    for(var i=1; i<7; i+=2){
    //核心代码,通过parseInt将十六进制转为十进制,parseInt只有一个参数时是默认转为十进制的,第二个参数则是指定转为对应进制
      sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));
    }
    return sColorChange;}1234567891011121314151617181920212223242526272829

颜色加深或者颜色减淡
原理是通过对rgb数字进行加减来实现,因为rgb的r、g、b三个数的值越大,颜色越浅,最大为255,此时为白色,值越小,颜色越深,最小值为0,此时为黑色,所以若是颜色值为rgb可以直接加减,若为十六进制颜色值,则先转为rgb,再加减

function LightDarkenColor(color, num) {
   let colorArr = getRgbNum(color);
   let sColorChange = [];
   for(var i=0;i<colorArr.length;i++){
   		let  val = colorArr[i]+num;
	    if(val<0){
	       val = 0;
	    }
	    if(val>255){
	    	val=255;
	    }
   		sColorChange.push(val)
   }
   return "rgba(" + sColorChange.join(",") + ",1)";}123456789101112131415

事实上colorRgba方法也具有颜色减淡功能,通过传递第二个参数(透明度)来侧面实现颜色减淡效果。但不具备颜色加深效果。


该文章在 2023/4/12 9:41:00 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved