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_01_理解内存分配原理分析
Oct 11 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
JS中的回调函数实例浅析
Mar 21 Javascript
React 项目迁移 Webpack Babel7的实现
Sep 12 Javascript
分享5个好用的javascript文件上传插件
Sep 16 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
Apr 29 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
JavaScript进阶(三)闭包原理与用法详解
May 09 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
解决VantUI popup 弹窗不弹出或无蒙层的问题
Nov 03 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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
摩卡咖啡
2021/03/03 咖啡文化
php中的一个中文字符串截取函数
2007/02/14 PHP
php模板之Phpbean的目录结构
2008/01/10 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
JS封装的选项卡TAB切换效果示例
2016/09/20 Javascript
jQuery实现移动端手机商城购物车功能
2016/09/24 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
Angular 利用路由跳转到指定页面的指定位置方法
2018/08/31 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
跟老齐学Python之让人欢喜让人忧的迭代
2014/10/02 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
django 配置阿里云OSS存储media文件的例子
2019/08/20 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
python模拟预测一下新型冠状病毒肺炎的数据
2020/02/01 Python
python实现飞机大战游戏(pygame版)
2020/10/26 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
BIBLOO波兰:捷克的一家在线服装店
2018/03/09 全球购物
俄罗斯首家面向中国消费者的一站式购物网站:Wruru
2020/05/08 全球购物
好军嫂事迹材料
2014/01/15 职场文书
淘宝中秋节活动方案
2014/01/31 职场文书
礼貌问候语大全
2015/11/10 职场文书
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL