js 实现颜色值格式转换 rgb和十六进制的转换_js将字符串转成16进制颜色的方法-程序员宅基地

技术标签: # JavaScript  前端开发  rgb和十六进制的转换  颜色值格式转换  javascript  

本文章是以prototype原型的方式,给string字符串类型添加方法,用于实现颜色值格式的转换。

如果你不用原型方法,那么你只要借鉴实现方法就好了。

 

RGB转换为16进制

String.prototype.colorHex = function () {
  // RGB颜色值的正则
  var reg = /^(rgb|RGB)/;
  var color = this;
  if (reg.test(color)) {
    var strHex = "#";
    // 把RGB的3个数值变成数组
    var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
    // 转成16进制
    for (var i = 0; i < colorArr.length; i++) {
      var hex = Number(colorArr[i]).toString(16);
      if (hex === "0") {
        hex += hex;
      }
      strHex += hex;
    }
    return strHex;
  } else {
    return String(color);
  }
};

使用方法:

"rgb(255,255,255)".colorHex();  // #ffffff

 

16进制转换为RGB

String.prototype.colorRgb = function () {
  // 16进制颜色值的正则
  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
  // 把颜色值变成小写
  var color = this.toLowerCase();
  if (reg.test(color)) {
    // 如果只有三位的值,需变成六位,如:#fff => #ffffff
    if (color.length === 4) {
      var colorNew = "#";
      for (var i = 1; i < 4; i += 1) {
        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
      }
      color = colorNew;
    }
    // 处理六位的颜色值,转为RGB
    var colorChange = [];
    for (var i = 1; i < 7; i += 2) {
      colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
    }
    return "RGB(" + colorChange.join(",") + ")";
  } else {
    return color;
  }
};

使用方法:

"#fff".colorRgb();  // rgb(255,255,255)
"#ffffff".colorRgb();  // rgb(255,255,255)

 

 

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/mossbaoo/article/details/93484635

智能推荐

如何实现音频变速不变调、变调不变速、变速又变调?_qt的音频倍速,怎么才能让其音色不变化呢-程序员宅基地

文章浏览阅读3.1k次。SoundTouch,Sonic实现音频变速和变调处理_qt的音频倍速,怎么才能让其音色不变化呢

NanoPC-T2 Uboot启动过程分析 - 2-6 board_init_r() part 2_uboot board late int-程序员宅基地

文章浏览阅读1.3k次。在继续分析之前,先回顾当前 gd 的内容:bd_t *bd = 0x42BF_FF10{unsigned long bi_memstart = 0phys_size_t bi_memsize = 0unsigned long bi_flashstart = 0unsigned long bi_flashsize = 0unsigned long bi_flashoffset = 0unsigned_uboot board late int

四象限法推导lm曲线_IS曲线推导-程序员宅基地

文章浏览阅读8.9k次。展开全部推导is曲线有三种方法,分别是四象限32313133353236313431303231363533e4b893e5b19e31333431343663法,投资储蓄法,ad=as法,其中四象限法用到了投资储蓄函数。这里介绍一下四象限法和ad=as法。四象限法,就是由三个函数来推导另一个函数,is产品市场的函数。这三个函数分别是投资储蓄函数,储蓄函数,和投资利率函数。有图形可以很直观的表示出..._is曲线形成的四象限法

seata_server启动报错:the name of service provider for [io.seata.core.store.db.DataSourceGenerator]-程序员宅基地

文章浏览阅读8.4k次。nacos:1.3.0seata:1.2.0坑:使用docker部署的nacos服务,在seata下载seata1.2.0的压缩包部署到服务器上,在部署seata_server时,使用nacos存seata_server的配置,上传seata的配置的到nacos中,上传步骤略,上传成功后可以在nacos中看到seata的配置:上传配置后,修改seata_server相关配置后,启动seata_server一直报错:the name of service provider for [._the name of service provider for [io.seata.core.store.db.datasourceprovider]

UML 对象图、时序图、活动图 、状态图、协作图 、包图、组件图及部署图_公司和部门的对象图-程序员宅基地

文章浏览阅读6.8k次,点赞3次,收藏55次。UML 对象图、时序图、活动图 、状态图、协作图 、包图、组件图及部署图目录对象图时序图活动图状态图协作图包图组件图部署图对象图对象图是类图的一个实例,用于显示系统执行时的一个可能的快照,即在某一个时间上系统可能出现的样子,对象图用带下划线的对象名称来表示对象.表现对象的特征 对象图展现了多个对象的特征及对象之间的交互时序图对象:时序图中对象使用矩形表示,并且对象名称下有下划线 将对象置于时序图的顶部说明在交互开始时对象就已经存在了。 如_公司和部门的对象图

阿里云服务器 nginx公网IP无法访问浏览器_ecs nginx 无法访问-程序员宅基地

文章浏览阅读1.4w次,点赞23次,收藏26次。转载自:https://blog.csdn.net/LJFPHP/article/details/78670459一、开始找原因在浏览器输入:http://ip,正常的话,会有页面,welcome to nginx 我这里是浏览器访问失败, 查找原因:1、在服务器上访问Ip执行:curl http://ip 结果:超时,未连接成功查看nginxaccess.log日志,发现日志未滚动,代表本机访问..._ecs nginx 无法访问

随便推点

Python如何读取pkl文件_如何将pkl加载dataload-程序员宅基地

文章浏览阅读5.5w次,点赞10次,收藏27次。以mnist.pkl为例 方法一: 然而我的还是会出现EOFError,无解,郁闷方法二: dataset=’mnist.pkl’ datasets = load_data(dataset) train_set_x, train_set_y = datasets[0] valid_set_x, valid_set_y = datasets[1] test_set_x, test_s_如何将pkl加载dataload

STA环境_generate clock与与源时钟是同步的吗-程序员宅基地

文章浏览阅读665次。STA环境只要是对约束的精确设定,包括时钟、IO时序特征以及一些时序路径等设置。注意:STA只能针对同步电路,对异步电路是无能为力的。下面主要讲述create_clock、clock_generate_clock、create_clock主要用来设置时钟源端。create_clock_uncertainty包含了jitter和其他悲观因素。约束条件更加严苛,使得电路更加稳健。在时序分析中,悲观就是安全。source latency的min max设置可分别应用于setup与ho._generate clock与与源时钟是同步的吗

c语言程序中小括号"()"和大括号"{}"的本质是什么,C程序中,用一对大括号{}括起来的多条语句称为复合语句,复合语句在语法上被认为是一条语句。...-程序员宅基地

文章浏览阅读3.5k次。C程序中,用一对大括号{}括起来的多条语句称为复合语句,复合语句在语法上被认为是一条语句。序中“经”是一种在理论体系建构上从现象界到本体界反推的逻辑。()用对语句条语句《中华人民共和国网络安全法》是我国第一部全面规范网络空间安全管理方面问题的基础性法律。国家倡导诚实守信、大括的多健康文明的网络行为,大括的多推动传播社会主义核心价值观,采取措施提高全社会的( )和水平,形成全社会共同参与促进网络安全..._c语言中的大括号和小括号

Could not resolve placeholder 'spring.security.mapping.directory' in string value "${spring.security_could not resolve placeholder 'tenant.mapping' in -程序员宅基地

文章浏览阅读3.7k次。1、错误描述2015-09-20 22:30:25 [main] WARN org.springframework.context.support.GenericApplicationContext - Exception encountered during context initialization - cancelling refresh attemptorg.springframew_could not resolve placeholder 'tenant.mapping' in value

angular之路——angular从0到1(持续更新)_angular项目从零到一-程序员宅基地

文章浏览阅读295次。angular从0到1:环境安装及运行angular从0到1:angular结构目录详解_angular项目从零到一

Python使用pandas包实现:读取文本文件data.txt(文件中每行存取一个整数),将其按照升序排序后再写入文本文件data_asc.txt文件中_数据文件data.txt里存储了若干个整型数,完成如下任务 ①读取文件里的数值用数组存-程序员宅基地

文章浏览阅读3.5k次。一、问题描述 已知一个文本文件(data.txt),其中存有若干数据,存储数据均为整数(不同整数之间以换行符进行的分隔),现要求使用python读取原始数据文件(文件中每行存取一个整数),将其按照升序排序之后再写入文本文件data_asc.txt文件中进行保存并且进行存储。二、代码实现import numpy as np#导入功能模块包import pandas as pdwith open ("C:/Users/lenovo/Desktop/data.txt",'r')..._数据文件data.txt里存储了若干个整型数,完成如下任务 ①读取文件里的数值用数组存

推荐文章

热门文章

相关标签