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 相关文章推荐
addRule在firefox下的兼容写法
Nov 30 Javascript
javascritp实现input输入框相关限制用法
Jun 29 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
JS中frameset框架弹出层实例代码
Apr 01 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
JS如何实现在页面上快速定位(锚点跳转问题)
Aug 14 Javascript
基于node.js之调试器详解
Aug 22 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
JQuery animate动画应用示例
May 14 jQuery
如何阻止移动端浏览器点击图片浏览
Aug 29 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
JavaScript实现简单的音乐播放器
Aug 14 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
基于php伪静态的实现详细介绍
2013/04/28 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
php多线程并发实现方法
2016/09/30 PHP
精解window.setTimeout()&window.setInterval()使用方式与参数传递问题!
2007/11/23 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
从零开始学习jQuery (四) jQuery中操作元素的属性与样式
2011/02/23 Javascript
JQuery中$之选择器用法介绍
2011/04/05 Javascript
读JavaScript DOM编程艺术笔记
2011/11/15 Javascript
jQuery获得内容和属性方法及示例
2013/12/02 Javascript
jQuery动画特效实例教程
2014/08/29 Javascript
使用javascript实现Iframe自适应高度
2014/12/24 Javascript
JS实现控制表格单元格垂直对齐的方法
2015/03/30 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
nodejs修复ipa处理过的png图片
2016/02/17 NodeJs
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
解读Python中degrees()方法的使用
2015/05/18 Python
windows下Python实现将pdf文件转化为png格式图片的方法
2017/07/21 Python
详解python中index()、find()方法
2019/08/29 Python
Pytorch之保存读取模型实例
2019/12/30 Python
匡威英国官网:Converse英国
2018/12/02 全球购物
关于廉洁的广播稿
2014/01/30 职场文书
学习自我鉴定
2014/02/01 职场文书
函授毕业自我鉴定
2014/02/04 职场文书
电子商务个人职业生涯规划范文
2014/02/12 职场文书
纠纷协议书
2014/04/16 职场文书
三方协议书范本
2014/04/22 职场文书
2015教师年度思想工作总结
2015/04/30 职场文书
怎样写家长意见
2015/06/04 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL