方法一:

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)";

 }

js获取随机色的更多相关文章

  1. JS 获取随机颜色值

    获取随机颜色值 function fn1(){ return '#' + Math.floor( Math.random() * 0xffffff ).toString(16); } function ...

  2. JS获取随机的16位十六进制的数

    直接上代码: function getRamNumber(){ var result=''; for(var i=0;i<16;i++){ result+=Math.floor(Math.ran ...

  3. js获取随机颜色

    var bg_colour = Math.floor(Math.random() * 16777215).toString(16); bg_colour = "#" + (&quo ...

  4. 1+x学习日志——js获取随机颜色的几种实现方式

    因为学习时间比较紧,所以也没多少时间发博客了.后续会慢慢补齐的,下面是代码 /// function randomColor(){ var r = parseInt(Math.random() * 2 ...

  5. js获取随机数

    js 获取随机数方法如下: 1.Math.random()表示 结果为0-1间的一个随机数(包括0,不包括1) : 返回指定范围的随机数(m-n之间)的公式 Math.random()*(n-m)+m ...

  6. 获取随机颜色js

    获取随机颜色方法一: function randomColor1() { var rand = Math.floor(Math.random() * 0xFFFFFF).toString(16); i ...

  7. javascript如何设置DIV背景色为随机色

    随机色有两种格式: 效果预览:http://wjf444128852.github.io/DEMOLIST/JS/test/index.html 1.rgb(xxx,xxx,xxx) 2.#xxxxx ...

  8. js 获取随机数 Math.random()

    js 获取随机数 Math.random() // 结果为0-1间的一个随机数(包括0,不包括1) var randomNum1 = Math.random(); //console.log(rand ...

  9. JS生成随机字符串的多种方法

    这篇文章主要介绍了JS生成随机字符串的方法,需要的朋友可以参考下 下面的一段代码,整理电脑时,记录备查. <script language="javascript"> ...

随机推荐

  1. 同一个主机上的JVM实例之间通信

    hadoop yarn里用了RPC调用.NM里面文件本地化类ContainerLocalizer用RPC心跳方式跟本机的ResourceLocalizationService通信. 用shared m ...

  2. XMPP协议介绍

    一.xmpp协议工作原理 二.XMPP地址模式 三.xmpp消息格式 xmpp xml包括三个元素,message,presence,iq,也翻译做三种节. 在'jabber:client'和'jab ...

  3. JAVA多线程与多进程

    并发与并行是两个既相似而又不相同的概念,但往往容易混为一谈,这两者究竟有什么区别呢?本文通过一个例子让你更好地理解(本文由并发编程网翻译). 现代社会是并行的:多核.网络.云计算.用户负载,并发技术对 ...

  4. SQL 基本的函数

    select * from emp;

  5. 资源Createwindow,对应标识符,绑定窗口

    问? 定义一个CEdit cedit1:怎么和IDC_EDIT1 关联,可以在CEdit.Create()里传进去或者在DoDataExchange()里面绑定,是不是一定要先弄出个IDC_EDIT1 ...

  6. codeforces343A A. Rational Resistance

    http://http://codeforces.com/problemset/problem/343/A A. Rational Resistance time limit per test 1 s ...

  7. demo04calc

    package com.example.demo05simplecalc; import android.os.Bundle; import android.app.Activity; import ...

  8. linux c

    #include <stdio.h>#include <string.h>#include <strings.h> int main(){    char buf[ ...

  9. clock sense和analysis mode

    PrimeTime会自动track clock tree中的inverter和buffer,从而得到每个register的clock sense. 如果clock tree中,只有buffer和inv ...

  10. ssh & display

    在Windows下用ssh连接服务器的话putty是一个小巧而且实用的工具,如果想要图形界面,可以使用X工具配合putty. 或者直接使用xmanager enterprise,非 常方便. 如果在U ...