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 相关文章推荐
javascript之卸载鼠标事件的代码
May 14 Javascript
js正则表达式的使用详解
Jul 09 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
Bootstrap轮播加上css3动画,炫酷到底!
Dec 22 Javascript
Node.js实现JS文件合并小工具
Feb 02 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
微信小程序 引用其他js文件实现代码
Feb 22 Javascript
JavaScript函数参数的传递方式详解
Mar 06 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 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
实用函数8
2007/11/08 PHP
简单解决新浪SAE无法上传文件的问题
2015/05/13 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
微信小程序 loading(加载中提示框)实例
2016/10/28 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
微信小程序 循环及嵌套循环的使用总结
2017/09/26 Javascript
JavaScript实现获取select下拉框中第一个值的方法
2018/02/06 Javascript
react以create-react-app为基础创建项目
2018/03/14 Javascript
Vue不能检测到Object/Array更新的情况的解决
2018/06/26 Javascript
JS实现简单的抽奖转盘效果示例
2019/02/16 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
Python实现好友全头像的拼接实例(推荐)
2017/06/24 Python
PyQt 线程类 QThread使用详解
2017/07/16 Python
django2用iframe标签完成网页内嵌播放b站视频功能
2018/06/20 Python
python3使用QQ邮箱发送邮件
2020/05/20 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
pandas数据处理进阶详解
2019/10/11 Python
python实现简单井字棋游戏
2020/03/04 Python
CSS3 实现穿梭星空动画
2020/11/13 HTML / CSS
京东奢侈品:全球奢侈品牌
2018/03/17 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
Nike俄罗斯官方网站:Nike RU
2021/03/05 全球购物
xml有哪些解析技术?区别是什么
2016/04/26 面试题
民主生活会整改措施(党员)
2014/09/18 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
就业导师推荐信范文
2015/03/27 职场文书
Python字符串对齐方法使用(ljust()、rjust()和center())
2021/04/26 Python
Golang 使用Map实现去重与set的功能操作
2021/04/29 Golang