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序列化方法实例分析
Jun 10 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
AngularJS向后端ASP.NET API控制器上传文件
Feb 03 Javascript
深入理解jQuery()方法的构建原理
Dec 05 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
Vue基于iview table展示图片实现点击放大
Aug 05 Javascript
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
微信小程序自定义底部弹出框动画
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
PHP 页面跳转到另一个页面的多种方法方法总结
2009/07/07 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
php 不使用js实现页面跳转
2014/02/11 PHP
php判断ip黑名单程序代码实例
2014/02/24 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
php跨服务器访问方法小结
2015/05/12 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
jQuery实现div浮动层跟随页面滚动效果
2014/02/11 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
javascript复制粘贴与clipboardData的使用
2014/10/16 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
2016/11/29 Javascript
在Vue组件上动态添加和删除属性方法
2018/02/23 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
Vue过滤器,生命周期函数和vue-resource简单介绍
2021/01/12 Vue.js
Python数据结构之翻转链表
2017/02/25 Python
tensorflow更改变量的值实例
2018/07/30 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
python3 配置logging日志类的操作
2020/04/08 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
python中的yield from语法快速学习
2020/11/06 Python
行政部主管岗位职责
2013/12/28 职场文书
yy生日主持词
2014/03/20 职场文书
思想纪律作风整顿剖析材料
2014/10/11 职场文书
2014年高二班主任工作总结
2014/12/16 职场文书
银行培训心得体会范文
2016/01/09 职场文书