JS-011-颜色进制转换(RGB转16进制;16进制转RGB)
2023-09-11 14:18:59 时间
在网页开发的时候,经常需要进行颜色设置,因而经常需要遇到进行颜色进制转换的问题,例如:RGB转16进制;16进制转RGB),前几天在测试的时候,发现网站的颜色进制转换某类16进制颜色(例如:#000080,#FA08FA)转换时总是提示颜色非法,看了一下 js 源码,发现其进制转换的方法是错误的。找了一下度娘和谷大爷,最终写了一个颜色转换的小方法,源码如下所示:
String.prototype.colorHex2Rgb = function(){ var reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/; var sColor = this.toLowerCase(); if(sColor && reg.test(sColor)){ if(sColor.length === 4){ var sColorNew = "#"; for(var i=1; i<4; i+=1){ sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1)); } sColor = sColorNew; } var sColorChange = []; for(var i=1; i<7; i+=2){ sColorChange.push(parseInt("0x"+sColor.slice(i,i+2))); } return "RGB(" + sColorChange.join(",") + ")"; }else{ return sColor; } }; String.prototype.colorRgb2Hex = function(){ var reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/; var that = this; if(/^(rgb|RGB)/.test(that)){ var aColor = that.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(","); var strHex = "#"; for(var i=0; i<aColor.length; i++){ var hex = Number(aColor[i]).toString(16); if(hex === "0"){ hex += hex; } strHex += hex; } if(strHex.length !== 7){ strHex = that; } return strHex.toUpperCase(); }else if(reg.test(that)){ var aNum = that.replace(/#/,"").split(""); if(aNum.length === 6){ return that; }else if(aNum.length === 3){ var numHex = "#"; for(var i=0; i<aNum.length; i+=1){ numHex += (aNum[i]+aNum[i]); } return numHex.toUpperCase(); } }else{ return that.toUpperCase(); } };
使用示例:
"#000080".colorHex2Rgb() ----> RGB(0,0,128) "#FA0080".colorHex2Rgb() ----> RGB(250,0,128) "#888".colorHex2Rgb() ----> RGB(136,136,136) "#888888".colorHex2Rgb() ----> RGB(136,136,136) "RGB(128,128,128)".colorRgb2Hex() ----> #808080 "RGB(255,128,128)".colorRgb2Hex() ----> #FF8080 "RGB(128,0,255)".colorRgb2Hex() ----> #8000FF
至此, JS-011-颜色进制转换(RGB转16进制;16进制转RGB) 顺利完结,希望此文能够给初学 JavaScript 的您一份参考。
最后,非常感谢亲的驻足,希望此文能对亲有所帮助。热烈欢迎亲一起探讨,共同进步。非常感谢! ^_^
相关文章
- Node.js -- Router模块中有一个param方法
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
- js将月份转换为英文简写的形式
- C# MVC 用户登录状态判断 【C#】list 去重(转载) js 日期格式转换(转载) C#日期转换(转载) Nullable<System.DateTime>日期格式转换 (转载) Asp.Net MVC中Action跳转(转载)
- js 处理 带T的时间日期格式,js时间日期格式转换
- 在Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行例子)
- [转]JS中对象与字符串的互相转换
- js高手
- jquery.ellipsis.js段落超出省略号插件
- 【HarmonyOS】【JS】【布局】鸿蒙js开发input 输入框弹出输入法时上方布局被挤扁?
- 【HarmonyOS】【JS】 鸿蒙js开发使用div自带的scroll,滑动条拉不到最下面?
- android js 互相调用
- js数组怎么删除某一项
- JS获取地址栏参数转换为对象
- js 保留两位小数,Js四舍五入,JavaScript Math四舍五入
- GIS教程之将 Plotly.js 与 Angular 一起使用
- js中转换Date日期格式
- JS将数字转换为大写汉字人民币
- JS 正则表达式转换字符串
- 微信小程序JS导出和导入
- 多级勾选框联动核心js
- [js高手之路]Node.js模板引擎教程-jade速学与实战4-模板引用,继承,插件使用
- QQ JS_SDk相关功能接口
- 小知识随手记(八):颜色转换、const常量的改动内因、js消息队列、JSON.stringify()的一些特性、多背景图写法、懒加载原理、document.body与document.documentElement区别及使用、移动ios卡顿问题、移位运算符、nextSibling 和nextElementSibling的区别
- 使用Qunit对js代码进行单元测试
- EXT-JS 6演示样例程序-Login演示样例程序
- html页面中使用 JS 返回上一页及返回上一页并刷新,iframe中打开指定页面,跳转到指定页面