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 相关文章推荐
JSONP 跨域共享信息
Aug 16 Javascript
jQuery实现form表单reset按钮重置清空表单功能
Dec 18 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
js中将String转换为number以便比较
Jul 08 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
深入理解Vue router的部分高级用法
Aug 15 Javascript
JS使用队列对数组排列,基数排序算法示例
Mar 02 Javascript
vue-cli3 DllPlugin 提取公用库的方法
Apr 24 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 Javascript
JavaScript实现简单的计算器
Jan 16 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
图象函数中的中文显示
2006/10/09 PHP
PHP排序算法之堆排序(Heap Sort)实例详解
2018/04/21 PHP
模仿jQuery each函数的链式调用
2009/07/22 Javascript
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
JSON辅助格式化处理方法
2013/03/26 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
Bootstrap的modal拖动效果
2016/12/25 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
详解Vue整合axios的实例代码
2017/06/21 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
js操作二进制数据方法
2018/03/03 Javascript
JavaScript实现shuffle数组洗牌操作示例
2019/01/03 Javascript
详解写好JS条件语句的5条守则
2019/02/28 Javascript
vue开发移动端底部导航条功能
2020/04/08 Javascript
vue开发chrome插件,实现获取界面数据和保存到数据库功能
2020/12/01 Vue.js
python根据京东商品url获取产品价格
2015/08/09 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
python+pyqt5实现24点小游戏
2019/01/24 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
在 Linux/Mac 下为Python函数添加超时时间的方法
2020/02/20 Python
Anaconda配置pytorch-gpu虚拟环境的图文教程
2020/04/16 Python
HTML5 audio标签使用js进行播放控制实例
2015/04/24 HTML / CSS
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
澳大利亚婴儿喂养品牌:Cherub Baby
2018/11/01 全球购物
C#面试常见问题
2013/02/25 面试题
怎样填写就业意向
2014/04/02 职场文书
淘宝客服工作职责
2014/07/11 职场文书
初中生物教学随笔
2015/08/15 职场文书
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS