JS实现颜色的10进制转化成rgba格式的方法


Posted in Javascript onSeptember 04, 2017

本文实例讲述了JS实现颜色的10进制转化成rgba格式的方法。分享给大家供大家参考,具体如下:

当我们在已知一个整数如(0~256x256x256x256 之间的颜色值),想获得关于它的3原色加一个透明度时,即alpha, red, green, blue,可采用如下方法:

方法一:

function getColor(number) {
  let color = number;
  const blue = parseInt(color % 0x100, 10);
  color = color >>> 8;
  const green = parseInt(color % 0x100, 10);
  color = color >>> 8;
  const red = parseInt(color % 0x100, 10);
  const alpha = (parseInt(color >>> 8, 10) / 0xFF).toFixed(1);
  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
}

方法二:

function getColor(number) {
  const alpha = number >> 24 & 0xff;
  const red = number >> 16 & 0xff;
  const green = number >> 8 & 0xff;
  const blue = number & 0xff;
  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
}
Javascript 相关文章推荐
Jquery Uploadify上传带进度条的简单实例
Feb 12 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
May 06 Javascript
javascript控制层显示或隐藏的方法
Jul 22 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
Sep 04 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
JS表单数据验证的正则表达式(常用)
Feb 18 Javascript
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
node.js实现的装饰者模式示例
Sep 06 Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
基于Cesium绘制抛物弧线
Nov 18 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 #Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 #Javascript
node-sass安装失败的原因与解决方法
Sep 04 #Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 #Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 #Javascript
React教程之Props验证的具体用法(Props Validation)
Sep 04 #Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 #Javascript
You might like
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
Laravel配置全局公共函数的方法步骤
2019/05/09 PHP
laravel 获取当前url的别名方法
2019/10/11 PHP
用jquery中插件dialog实现弹框效果实例代码
2013/11/15 Javascript
jquery 无限级下拉菜单的简单实现代码
2014/02/21 Javascript
node.js 动态执行脚本
2016/06/02 Javascript
JavaScript 闭包详细介绍
2016/09/28 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
[04:12]第二届DOTA2亚洲邀请赛选手传记-Newbee.Sccc
2017/04/03 DOTA
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
python解析xml模块封装代码
2014/02/07 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
Python语言描述机器学习之Logistic回归算法
2017/12/21 Python
Django处理Ajax发送的Get请求代码详解
2019/07/29 Python
python GUI库图形界面开发之PyQt5 MDI(多文档窗口)QMidArea详细使用方法与实例
2020/03/05 Python
python简单的三元一次方程求解实例
2020/04/02 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
德国机车企业:FC-Moto
2017/10/27 全球购物
美国在线面料商店:Fashion Fabrics Club
2020/01/31 全球购物
史上最全面的Java面试题汇总!
2015/02/03 面试题
应届生人事助理求职信
2013/11/09 职场文书
出国留学介绍信
2014/01/13 职场文书
经典英文广告词
2014/03/18 职场文书
五水共治一句话承诺
2014/05/30 职场文书
创先争优个人总结
2015/03/04 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
Vue如何实现组件间通信
2021/05/15 Vue.js
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
Android开发实现极为简单的QQ登录页面
2022/04/24 Java/Android