JS实现随机颜色的3种方法与颜色格式的转化


Posted in Javascript onJanuary 05, 2017

前言

相信大家都知道在前端的颜色表示方式有多种,一种是以3个或6个十六进制的数子表示,一种是RGB的数字形式,还有一种是直接以颜色的英文来表示。这三种都是不支持透明色的。所以还有RGBA的表式方式,在RGB的的基础上加入了Alpha透明,使网页可以展现更加复杂绚丽的效果。

随机颜色

在平时的码农日常中,经常会用到求随机颜色的地方,下面是我总结的几种简单的实现随机颜色的方式:

十六进制格式(#000000-#FFFFFF)

第一种是比较简单的方法,这种方法是先随机生成ffffff以内16进制数,然后判断位数,少于6位的用while循环在前面加0,凑够6位。

function randomHexColor() { //随机生成十六进制颜色
 var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
 while (hex.length < 6) { //while循环判断hex位数,少于6位前面加0凑够6位
  hex = '0' + hex;
 }
 return '#' + hex; //返回‘#'开头16进制颜色
}

还有一种比较方便但是比较难懂的方法,需要用到位运算。

function randomHexColor() { //随机生成十六进制颜色
 return '#' + ('00000' + (Math.random() * 0x1000000 << 0).toString(16)).substr(-6);
}

按执行顺序可以分为以下六步:

  1. 先执行Math.random() * 0x1000000,其中0x1000000=0xffffff+1,因为Math.random()取不到1,所以+1,这样就会生成一个1-16777216(不包含)以内的浮点数。
  2. 然后执行<<0,这是取整运算,去掉后面的小数点。这时为一个16777216(不包含)以内的十进制数。
  3. 之后执行.toString(16) ,把十进制数转化为六位以下16进制数。
  4. 再后执行'00000'+,这时因为之前生成的16进制数最少可能仅一位,在前面加上5个0。
  5. 最后执行.substr(-6) ,是去从-6开始的后面所有字符串,也就是最后6位数。
  6. 前面加上#并retuen。

RGB格式

function randomRgbColor() { //随机生成RGB颜色
 var r = Math.floor(Math.random() * 256); //随机生成256以内r值
 var g = Math.floor(Math.random() * 256); //随机生成256以内g值
 var b = Math.floor(Math.random() * 256); //随机生成256以内b值
 return `rgb(${r},${g},${b})`; //返回rgb(r,g,b)格式颜色
}

RGBA格式

function randomRgbaColor() { //随机生成RGBA颜色
 var r = Math.floor(Math.random() * 256); //随机生成256以内r值
 var g = Math.floor(Math.random() * 256); //随机生成256以内g值
 var b = Math.floor(Math.random() * 256); //随机生成256以内b值
 var alpha = Math.random(); //随机生成1以内a值
 return `rgb(${r},${g},${b},${alpha})`; //返回rgba(r,g,b,a)格式颜色
}

颜色格式转化

在编码过程中,经常会遇到要将颜色格式相互转化的问题,其中十六进制格式和RGB格式是可以相互转化的,但是RGBA格式由于多了前两者没有的Alpha透明属性,所以和前两者转化会丢失Alpha值,不建议进行转化,下面是我的颜色转化的方法:

十六进制转为RGB

function hex2Rgb(hex) { //十六进制转为RGB
 var rgb = []; // 定义rgb数组
 if (/^\#[0-9A-F]{3}$/i.test(hex)) { //判断传入是否为#三位十六进制数
  let sixHex = '#';
  hex.replace(/[0-9A-F]/ig, function(kw) {
   sixHex += kw + kw; //把三位16进制数转化为六位
  });
  hex = sixHex; //保存回hex
 }
 if (/^#[0-9A-F]{6}$/i.test(hex)) { //判断传入是否为#六位十六进制数
  hex.replace(/[0-9A-F]{2}/ig, function(kw) {
   rgb.push(eval('0x' + kw)); //十六进制转化为十进制并存如数组
  });
  return `rgb(${rgb.join(',')})`; //输出RGB格式颜色
 } else {
  console.log(`Input ${hex} is wrong!`);
  return 'rgb(0,0,0)';
 }
}

RGB转为十六进制

function rgb2Hex(rgb) {
 if (/^rgb\((\d{1,3}\,){2}\d{1,3}\)$/i.test(rgb)) { //test RGB
  var hex = '#'; //定义十六进制颜色变量
  rgb.replace(/\d{1,3}/g, function(kw) { //提取rgb数字
   kw = parseInt(kw).toString(16); //转为十六进制
   kw = kw.length < 2 ? 0 + kw : kw; //判断位数,保证两位
   hex += kw; //拼接
  });
  return hex; //返回十六进制
 } else {
  console.log(`Input ${rgb} is wrong!`);
  return '#000'; //输入格式错误,返回#000
 }
}

总结

以上就是这篇文文章的全部内容了,也是我在平时遇到的关于颜色处理方面的问题,大家有遇到什么奇怪的问题和更好的解决方法可以交流沟通一下。希望本文的内容对大家的学习或者工作能带来一定的帮助。

Javascript 相关文章推荐
JavaScript中的this实例分析
Apr 28 Javascript
JS获取当前网页大小以及屏幕分辨率等
Sep 05 Javascript
js实现网页多级级联菜单代码
Aug 20 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
深入理解JavaScript函数参数(推荐)
Jul 26 Javascript
jquery实现图片切换代码
Oct 13 Javascript
微信小程序 网络请求(post请求,get请求)
Jan 17 Javascript
AngularJS改变元素显示状态
Apr 20 Javascript
js轮播图无缝滚动效果
Jun 17 Javascript
[js高手之路]HTML标签解释成DOM节点的实现方法
Aug 31 Javascript
深入浅析Vue全局组件与局部组件的区别
Jun 15 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
jQuery选择器实例应用
Jan 05 #Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 #Javascript
javascript解析ajax返回的xml和json格式数据实例详解
Jan 05 #Javascript
Node.js中文件操作模块File System的详细介绍
Jan 05 #Javascript
Extjs让combobox写起来简洁又漂亮
Jan 05 #Javascript
JS实现给对象动态添加属性的方法
Jan 05 #Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 #Javascript
You might like
实用PHP会员权限控制实现原理分析
2011/05/29 PHP
php使用ffmpeg向视频中添加文字字幕的实现方法
2016/05/23 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
ie8模式下click无反应点击option无反应的解决方法
2014/10/11 Javascript
JQuery中层次选择器用法实例详解
2015/05/18 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
使用jQuery在移动页面上添加按钮和给按钮添加图标
2015/12/04 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
微信小程序页面开发注意事项整理
2017/05/18 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
Python Web框架之Django框架cookie和session用法分析
2019/08/16 Python
django 前端页面如何实现显示前N条数据
2020/03/16 Python
Python3.9 beta2版本发布了,看看这7个新的PEP都是什么
2020/06/10 Python
Jacques Lemans德国:奥地利钟表品牌
2019/12/26 全球购物
存储过程和sql语句的优缺点
2014/07/02 面试题
《埃及的金字塔》教学反思
2014/04/07 职场文书
文秘自荐信
2014/06/28 职场文书
领导班子自我剖析材料
2014/08/16 职场文书
总经理检讨书
2014/09/15 职场文书
骨干教师申报材料
2014/12/17 职场文书
秋季运动会开幕词
2015/01/28 职场文书
电影开国大典观后感
2015/06/04 职场文书
运动会主持词大全
2015/07/02 职场文书
标准发言稿结尾
2019/07/18 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
Python django中如何使用restful框架
2021/06/23 Python
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python