首页 > 编程语言 >JavaScript中16进制颜色与rgb颜色互相转换

JavaScript中16进制颜色与rgb颜色互相转换

时间:2023-08-08 11:11:45浏览次数:39  
标签:颜色 16 res JavaScript hex rgb hexArr var

16进制转 rgb

function hexToRgba(hex, opacity) {
    if (!hex) hex = '#ededed';
    let rgba = 'rgba(' + parseInt('0x' + hex.slice(1,3)) + ',' +
        parseInt('0x' + hex.slice(3,5)) + ',' +
        parseInt('0x' + hex.slice(5,7)) + ',' +
        (opacity || "1") + ')'
    return rgba
}

rgb 转 16进制

function RGBToHex(rgb) {
  if (!rgb) rgb = 'rgb(237,237,237)'  
  var regexp = /[0-9]{0,3}/g
  var res = rgb.match(regexp) // 利用正则表达式去掉多余的部分,将rgb中的数字提取
  var hexRes = '#'
  var hex = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F']
  var hexArr = []
  for (let i = 0; i < res.length; i++) {
    if (res[i]) {
      if (res[i] > 16) {
        let leftIndex = (res[i] / 16) >> 0 // 向下取整
        let rightIndex = +res[i] % 16
        hexArr.push(hex[leftIndex])
        hexArr.push(hex[rightIndex])
      } else {
        hexArr.push(0)
        hexArr.push(hex[res[i]])
      }
    }
  }
  return hexRes += hexArr.join('')  // #EDEDED
}

  

标签:颜色,16,res,JavaScript,hex,rgb,hexArr,var
From: https://www.cnblogs.com/j-a-h/p/17613628.html

相关文章

  • Siemens SERVER 2016中安装WINCC 7.5 SP1
     一、查询WINCC兼容性列表,得知WINCC7.5可以在SERVER2016中安装,且与SIMATICNETV16兼容:二、了解了系统及软件的兼容性之后,开始准备操作系统及软件。1.安装VMware虚拟机,内容略过……2.部署英文版WindowsServer2016系统;3.安装中文语言包;4.安装消息队列、IIS、NetFramew......
  • Ubuntu 16.04 安装python3.6正确顺序(解决ssl错误,pip升级)
    0、下载离线python压缩包PythonSourceReleases|Python.org,1、新建root,并进入root权限(sudopasswdroot)(su)2、升级openssl版本wgethttps://www.openssl.org/source/openssl-1.1.0k.tar.gztar-zxvfopenssl-1.1.0k.tar.gzcdopenssl-1.1.0k./configmakeinstall......
  • Cilium系列-16-CiliumNetworkPolicy 实战演练
    系列文章Cilium系列文章前言今天我们进入Cilium安全相关主题,基于Cilium官方的《星球大战》Demo做详细的CiliumNetworkPolicy实战演练。场景您是帝国(Empire)的平台工程团队的一员,负责开发死星(DeathStar)API并将其部署到帝国银河Kubernetes服务(Imperial......
  • JavaScript 基础(1) - 笔记
    1JavaScript基础1.1JavaScript是什么1.JavaScript(是什么?)是一种运行在客户端(浏览器)的编程语言,实现人机交互效果。2.作用(做什么?)网页特效(监听用户的一些行为让网页做出对应的反馈)表单验证(针对表单数据的合法性进行判断)数据交互(获取后台的数据,渲染到前端)服务端编程(node.js......
  • Win11设置固定IP地址后,仍然以169.254.*.* 为首选IP的解决方法
    经过不断尝试,结合网上找到的范例,以管理员执行以下命令并重启可解决:netshwinsockresetcatalog解释:一般添加catalog意指winsock目录,但通常命令可不用加catalog参数,直接reset即可重置。netshintipresetreset.log解释:注意:如果您不想指定日志文件的目录路径,运行命令︰netshin......
  • 【JavaScript24】使用const声明常量
    前言const用于声明一个或多个常量,声明时必须进行初始化,且初始化后值不可再修改。const声明常量const定义常量与使用let定义的变量相似:二者都是块级作用域都不能和它所在作用域内的其他变量或函数拥有相同的名称两者还有以下两点区别:const声明的常量必须初始化,......
  • 【JavaScript22】关于window
    window对象就是JavaScript的Global对象,所以在使用window对象的属性和方法是不需要特别指明。如:alert,实际上完整的调用是window.alert,通常省略了window对象的引用。//var直接在全局声明的变量,就是全局变量.let不是......varname="xwl";//全局变量,这种变量.实际上是......
  • 【JavaScript23】使用let声明变量
    前言ES2015(ES6)新增加了两个重要的JavaScript关键字:let和const。let声明的变量只在let命令所在的代码块内有效。const声明一个只读的常量,一旦声明,常量的值就不能改变。在ES6之前,JavaScript使用var声明变量只有两种作用域:全局变量与函数内的局部变量。......
  • JavaScript - JsBarcode条形码
    <!DOCTYPEhtml><html><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js"><......
  • 【JavaScript21】关于Storage
    本地存储.存储在浏览器端的数据.可以理解成一个小型的非关系型数据库.localStorage和sessionStorage这俩玩意使用上是一样的.区别在于.一个是永久存储一个是临时存储.localStorage永久存储sessionStorage临时存储,浏览器关闭后.数据就没了.document.cookie也......