方法一:

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. jquery文字溢出处理,超出变省略号

    //文字溢出 $(function(){ $(".d_dt a").each(function(){ var maxwidth =100; if($(this).text().le ...

  2. 错误是无法将“XXX”转换为“System.CompenentModel.Design.Serialization.InstanceDescrip”问题的解决办法

    发生原因: 出现这个问题的原因是两次编译生成的程序集的版本一样,导致VS的窗体设计器没有获取到最新的运行时对象,而出现的错误. 解决办法: 修改项目的配置信息,使其每次编译的时候都生成不同的版本. 在 ...

  3. Java基础之一组有用的类——使用比较器对数组排序(TrySortingWithComparator)

    控制台程序. Arrays类中的sort()静态方法把传送为参数的数组元素按升序方式排序. 对于第一个参数类型是Object[]的sort()方法来说,可以传送任意类型的数组.如果使用sort()方法 ...

  4. Canopy算法聚类

    Canopy一般用在Kmeans之前的粗聚类.考虑到Kmeans在使用上必须要确定K的大小,而往往数据集预先不能确定K的值大小的,这样如果 K取的不合理会带来K均值的误差很大(也就是说K均值对噪声的抗 ...

  5. [reprint]如何编写引导程序 Hello World

    在存储介质(硬盘.软盘.光盘)中有一块特殊的区域,叫做引导区.在计算机启动后,BIOS会读取引导区内的代码到内存中去,然后将执行这些代码.引导区的位置和大小与计算机的平台有关,对于IBM-PC兼容机, ...

  6. sdutoj 2607 Mountain Subsequences

    http://acm.sdut.edu.cn/sdutoj/problem.php?action=showproblem&problemid=2607 Mountain Subsequence ...

  7. poj: 1207

    好吧这题竟然还有先大后小的可能,能不这么恶心下吗.. #include <iostream> #include <stdio.h> #include <string.h& ...

  8. Server.Transfer,Response.Redirect用法点睛

    Server.Transfer,Response.Redirect的区别 如果你读过很多行业杂志和 ASP.NET 示例,你会发现,大多数人使用 Response.Redirect 将用户引导到另一个 ...

  9. Fresco源码解析 - 创建一个ImagePipeline(一)

    在Fresco源码解析 - 初始化过程分析章节中, 我们分析了Fresco的初始化过程,两个initialize方法中都用到了 ImagePipelineFactory类. ImagePipeline ...

  10. Tomcat上的项目部署到WebLogic上の注意事项

    1.修改web.xml: <!-- <display-name>weboutweb</display-name> --> <!-- 注释掉 display-n ...