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 相关文章推荐
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
A标签触发onclick事件而不跳转的多种解决方法
Jun 27 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
如何编写高质量JS代码(续)
Feb 25 Javascript
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 Javascript
AngularJS $http模块POST请求实现
Apr 08 Javascript
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
vue 实现数字滚动增加效果的实例代码
Jul 06 Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
Vue实现简易计算器
Feb 25 Javascript
js实现限定范围拖拽的示例
Oct 26 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中的登陆login
2007/01/18 PHP
PHP list() 将数组中的值赋给变量的简单实例
2016/06/13 PHP
PHP编写简单的App接口
2016/08/28 PHP
php实现的PDO异常处理操作分析
2018/12/27 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
基于jquery的9行js轻松实现tab控件示例
2013/10/12 Javascript
JavaScript学习笔记之基础语法
2015/01/22 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
使用jquery提交form表单并自定义action的实现代码
2016/05/25 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
Angular4 中内置指令的基本用法
2017/07/31 Javascript
js基于FileSaver.js 浏览器导出Excel文件的示例
2017/08/15 Javascript
js捆绑TypeScript声明文件的方法教程
2018/04/13 Javascript
了解javascript中变量及函数的提升
2019/05/27 Javascript
nodejs二进制与Buffer的介绍与使用
2019/07/11 NodeJs
详解nginx配置vue h5 history去除#号
2020/11/09 Javascript
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
Python多线程编程简单介绍
2015/04/13 Python
python的exec、eval使用分析
2017/12/11 Python
linux中如何使用python3获取ip地址
2019/07/15 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
Python提取PDF内容的方法(文本、图像、线条等)
2019/09/25 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
日语专业毕业生自荐信
2013/11/11 职场文书
气象学专业个人求职信
2014/04/22 职场文书
婚前协议书范本两则
2014/10/16 职场文书
2014年村官工作总结
2014/11/24 职场文书
工作检讨书怎么写
2015/01/23 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
导游词之崇武古城
2019/10/07 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
读《皮囊》有感:理解是对他人的最大的善举
2019/11/14 职场文书
Javascript 解构赋值详情
2021/11/17 Javascript