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 相关文章推荐
web前端设计师们常用的jQuery特效插件汇总
Dec 07 Javascript
javascript实现给定半径求出圆的面积
Jun 26 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 Javascript
JS 实现banner图片轮播效果(鼠标事件)
Aug 04 Javascript
Vue用v-for给循环标签自身属性添加属性值的方法
Oct 18 Javascript
JS执行控制之节流模式实例分析
Dec 21 Javascript
jQuery zTree插件快速实现目录树
Aug 16 jQuery
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根据IP判断地区名信息的示例代码
2014/03/03 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
JS两种定义方式的区别、内部原理
2013/11/21 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
2015/05/14 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
JavaScript String 对象常用方法总结
2016/04/28 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
2017/02/14 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
js实现前面自动补全位数的方法
2018/10/10 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
vue打开其他项目页面并传入数据详解
2020/11/25 Vue.js
点球小游戏python脚本
2018/05/22 Python
Selenium的使用详解
2018/10/19 Python
Python拼接字符串的7种方法总结
2018/11/01 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
基于python实现蓝牙通信代码实例
2019/11/19 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
HTML5 拖放(Drag 和 Drop)详解与实例代码
2017/09/14 HTML / CSS
JYSK加拿大:购买家具、床垫、家居装饰等
2020/02/14 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
计算机求职信
2013/12/01 职场文书
开门红主持词
2014/04/02 职场文书
社会实践先进工作者事迹材料
2014/05/06 职场文书
庆元旦演讲稿
2014/09/15 职场文书
离婚协议书范文2015
2015/01/26 职场文书
锅炉工岗位职责
2015/02/13 职场文书
关于元旦的广播稿2016
2015/12/17 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技