首页 > 其他分享 >已知16进制和透明度,使用JS语法求他们在一起的rgba。可以参考下面代码:

已知16进制和透明度,使用JS语法求他们在一起的rgba。可以参考下面代码:

时间:2023-09-04 16:57:02浏览次数:34  
标签:slice const 16 透明度 hex JS rgba

事件起因:最近做的一个大转盘游戏页面样式编辑,背景透明度调整的时候,会导致字体一起变动,于是需要将背景演示的16进制和透明度一起转换成rgba。

 

function hexToRgba(hex, alpha) {
// 去掉可能包含的 "#" 符号
if (hex.startsWith("#")) {
hex = hex.slice(1);
}

// 解析16进制颜色值,并确保它是6个字符(3个分量)或8个字符(3个分量 + 透明度)
if (hex.length === 6 || hex.length === 8) {
// 如果是8个字符,提取前6个字符作为颜色部分
const colorPart = hex.length === 8 ? hex.slice(0, 6) : hex;
const red = parseInt(colorPart.slice(0, 2), 16);
const green = parseInt(colorPart.slice(2, 4), 16);
const blue = parseInt(colorPart.slice(4, 6), 16);

// 确保透明度在0到1之间
const alphaValue = Math.min(1, Math.max(0, alpha));

// 使用字符串插值构建RGBA颜色字符串
return `rgba(${red}, ${green}, ${blue}, ${alphaValue})`;
} else {
throw new Error('Invalid hex color format');
}
}

// 示例用法
const hexColor = '#FF0000';
const alpha = 0.5;

try {
const rgbaColor = hexToRgba(hexColor, alpha);
console.log(rgbaColor); // 输出 "rgba(255, 0, 0, 0.5)"
} catch (error) {
console.error(error.message); // 输出错误消息(如果16进制颜色格式无效)
}

标签:slice,const,16,透明度,hex,JS,rgba
From: https://www.cnblogs.com/zhao-qin/p/17677523.html

相关文章

  • [CF1641D] Two Arrays
    题目描述Samchangedhisschoolandonthefirstbiologylessonhegotaveryinterestingtaskaboutgenes.Youaregiven$n$arrays,the$i$-thofthemcontains$m$differentintegers—$a_{i,1},a_{i,2},\ldots,a_{i,m}$.Alsoyouaregivenanarra......
  • 前端小白Step2-package.json文件详解
    前文已讲过 package.json-------npm的配置文件,主要用于确定当前项目直接依赖的包版本的范围(例如:^1.0.0表示的是大于等于1.0.0小于2.0.0)只依赖package.json管理包会有两个缺点:    *.同一份package.json安装的依赖版本可能不同,如果依赖包有小版本更新并且引入了bug会导致......
  • 微信JSSDK使用步骤
    官方文档地址:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4在步骤三:通过config接口注入权限验证配置wx.config({debug:true,//开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打......
  • 泛微E-cology XXE漏洞复现(QVD-2023-16177)
    漏洞概述泛微e-cology某处功能点最初针对用户输入的过滤不太完善,导致在处理用户输入时可触发XXE。后续修复规则依旧可被绕过,本次漏洞即为之前修复规则的绕过。攻击者可利用该漏洞列目录、读取文件,甚至可能获取应用系统的管理员权限。影响版本泛微EC9.x且补丁版本<10.58.2......
  • 泛微E-cology9 browser.jsp SQL注入漏洞QVD-2023-5012
    漏洞简介泛微e-cology9存在SQL注入漏洞,攻击者可利用该漏洞获取数据库敏感信息。影响版本泛微e-cologyV9<10.56漏洞复现fofa语法:app="泛微-协同商务系统"登录页面:POC:POST/mobile/%20/plugin/browser.jspHTTP/1.1Host:115.236.39.115:8088User-Agent:Mozilla/5.0(W......
  • MySQL的Json类型个人用法详解
    ​ 前言虽然MySQL很早就添加了Json类型,但是在业务开发过程中还是很少设计带这种类型的表。少不代表没有,当真正要对Json类型进行特定查询,修改,插入和优化等操作时,却感觉一下子想不起那些函数怎么使用。比如把json里的某个键和值作为SQL条件,修改某个键下的子键的值,其中可能会遇到......
  • 泛微E-cology HrmCareerApplyPerView.jspSQL注入漏洞
    漏洞简介泛微OAE-CologyHrmCareerApplyPerView.jsp文件存在SQL注入漏洞,攻击者通过漏洞可以获取服务器数据库敏感文件影响版本泛微OAE-Cologyv8.0漏洞复现fofa语法:app="泛微-协同办公OA"登录页面如下:POC/pweb/careerapply/HrmCareerApplyPerView.jsp?id=1%20union%20......
  • 泛微E-cology LoginSSO.jsp SQL注入漏洞 CNVD-2021-33202
    漏洞简介泛微e-cology是专为大中型企业制作的OA办公系统,支持PC端、移动端和微信端同时办公等。泛微e-cology存在SQL注入漏洞。攻击者可利用该漏洞获取敏感信息。漏洞影响泛微e-cology8.0漏洞复现fofa语法:app="泛微-协同办公OA"登录页面如下:POC:/upgrade/detail.jsp/log......
  • 使用Flask和Vue.js构建现代Web应用
    博客主题:使用Flask和Vue.js构建现代Web应用概述在本篇博客中,我们将介绍如何使用Flask和Vue.js这两个流行的框架来构建一个现代化的Web应用。Flask是一个轻量级的PythonWeb框架,而Vue.js是一个灵活且易于使用的JavaScript框架,用于构建交互式的用户界面。我们将通过一个简单的示......
  • MybatisPlus处理Mysql的json类型
    MybatisPlus处理Mysql的json类型1、在数据库表定义JSON字段;2、在实体类加上@TableName(autoResultMap=true)、在JSON字段映射的属性加上@TableField(typeHandler=JacksonTypeHandler.class);1.实体类中有个属性是其他对象,或者是List;在数据库中存储时使用的是mysql的json格式,此......