文档章节

js生成随机颜色

writeademo
 writeademo
发布于 2016/10/19 12:03
字数 567
阅读 53
收藏 0

js生成随机颜色

方法一:

var getRandomColor = function(){

  return  '#' +

    (function(color){

    return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])

      && (color.length == 6) ?  color : arguments.callee(color);

  })('');

}

随机生成6个字符然后再串到一起,闭包调用自身与三元运算符让程序变得内敛。

方法二:

var getRandomColor = function(){

  return (function(m,s,c){

    return (c ? arguments.callee(m,s,c-1) : '#') +

      s[m.floor(m.random() * 16)]

  })(Math,'0123456789abcdef',5)

}

把Math对象,用于生成hex颜色值的字符串提取出来,并利用第三个参数来判断是否还继续调用自身。

方法三:

Array.prototype.map = function(fn, thisObj) {

  var scope = thisObj || window;

  var a = [];

  for ( var i=0, j=this.length; i < j; ++i ) {

    a.push(fn.call(scope, this[i], i, this));

  }

  return a;

};

var getRandomColor = function(){

  return '#'+'0123456789abcdef'.split('').map(function(v,i,a){

    return i>5 ? null : a[Math.floor(Math.random()*16)] }).join('');

}

这个要求我们对数组做些扩展,map将返回一个数组,然后我们再用join把它的元素串成字符。

 

方法四:

var getRandomColor = function(){

  return '#'+Math.floor(Math.random()*16777215).toString(16);

}

这个实现非常逆天,虽然有点小bug。我们知道hex颜色值是从#000000到#ffffff,后面那六位数是16进制数,相当于"0x000000"到"0xffffff"。这实现的思路是将hex的最大值ffffff先转换为10进制,进行random后再转换回16进制。我们看一下,如何得到16777215 这个数值的。

方法五:

var getRandomColor = function(){

  return '#'+(Math.random()*0xffffff<<0).toString(16);

}

基本实现4的改进,利用左移运算符把0xffffff转化为整型。这样就不用记16777215了。由于左移运算符的优先级比不上乘号,因此随机后再左移,连Math.floor也不用了。

 

方法六:

var getRandomColor = function(){

  return '#'+(function(h){

    return new Array(7-h.length).join("0")+h

  })((Math.random()*0x1000000<<0).toString(16))

}

修正上面版本的bug(无法生成纯白色与hex位数不足问题)。0x1000000相当0xffffff+1,确保会抽选到0xffffff。在闭包里我们处理hex值不足6位的问题,直接在未位补零。

方法七:

var getRandomColor = function(){

  return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).slice(-6);

}

这次在前面补零,连递归检测也省了。

 

上面版本生成颜色的范围算是大而全,但随之而来的问题是颜色不好看,于是实现8搞出来了。它生成的颜色相当鲜艳。

方法八:

var getRandomColor = function(){

    return "hsb(" + Math.random()  + ", 1, 1)";

 }

 

本文转载自:

writeademo
粉丝 25
博文 632
码字总数 229415
作品 0
东城
私信 提问
11款JavaScript颜色拾取插件推荐

本文收集了11个JavaScript颜色拾取插件,希望你会喜欢。 1. ExColor ExColor是一个类似Photoshop样式的jQuery颜色拾取插件,其定制性非常高,通过参数设置可生成各种样式和效果的颜色拾取器。...

红薯
2011/12/07
1K
0
ES6 手写一个“辨色”小游戏

1. 前言 依稀记得几年前朋友圈流行的辨色小游戏,找出颜色不同的矩形。前些天突发奇想,打算自己手写一个类似的游戏,话不多说,先上 Demo . --项目源码 本实例基于 ES6 实现,并兼容 ie9及以...

suporka
2018/09/19
0
0
WebAssembly Demo之Canvas中随机运动圆球

作者:云荒杯倾 1、Demo功能介绍 实现了一个圆球在800px * 600px画布内随机运动,固定时间间隔随机运动一次,运动方向由x和y轴组成的向量决定,这个向量是随机值(后面会称它为随机向量),从...

云荒杯倾
2017/09/19
0
0
【JavaScript】生成一段序列不同的随机数

在JavaScript如果需要生成一段不同的随机数,最好的方法,还是将要产生的随机数的范围放到这一个数组,并打乱这个数组的顺序。 由于JavaScript里面是没有shuffle这个函数的,所以我们要打乱数...

yongh701
2018/09/01
24
0
如何使用less实现随机下雪动画详解

冬天来了,设计师说摇摇乐的场景需要随机下落的雪花动画,第一时间就想到的方法是canvas比较好,项目非常紧急,然而小程序对canvas支持不够友好,容易在项目中出现无法预估的兼容性问题 ,马...

前端小攻略
01/21
1K
2

没有更多内容

加载失败,请刷新页面

加载更多

Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
6
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部