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 相关文章推荐
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
javascript parseInt 大改造
Sep 27 Javascript
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
Javascript 面向对象编程(coolshell)
Mar 18 Javascript
JavaScript前端图片加载管理器imagepool使用详解
Dec 29 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
Dec 22 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
ES2020 新特性(种草)
Jan 12 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入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
从javascript语言本身谈项目实战
2006/12/27 Javascript
Ajax::prototype 源码解读
2007/01/22 Javascript
走出JavaScript初学困境—js初学
2008/12/29 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
深入理解JavaScript中的尾调用(Tail Call)
2017/02/07 Javascript
js实现简单的手风琴效果
2017/02/27 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
微信小程序 button样式设置为图片的方法
2020/06/19 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
浅析Python中的多重继承
2015/04/28 Python
python开发之字符串string操作方法实例详解
2015/11/12 Python
Python编程之字符串模板(Template)用法实例分析
2017/07/22 Python
Python探索之静态方法和类方法的区别详解
2017/10/27 Python
python实现多人聊天室
2020/03/31 Python
详解Python进阶之切片的误区与高级用法
2018/12/24 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
python getpass实现密文实例详解
2019/09/24 Python
Python enumerate内置库用法解析
2020/02/24 Python
python实现跨excel sheet复制代码实例
2020/03/03 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
澳大利亚领先的优质葡萄酒拍卖会:Langton’s Fine Wines
2019/03/24 全球购物
工作交流会欢迎词
2014/01/12 职场文书
2014年圣诞节促销方案
2014/03/14 职场文书
合作意向书格式及范文
2014/03/31 职场文书
环保建议书400字
2014/05/14 职场文书
党的群众路线教育实践活动个人整改措施材料
2014/11/04 职场文书
教师节感想
2015/08/11 职场文书
MySQL 重命名表的操作方法及注意事项
2021/05/21 MySQL