方法一:

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. nsstring基本数据类型的包装类

    // //  main.m //  10-基本数据类型的包装类 // //  Created by apple on 14-3-20. //  Copyright (c) 2014年 apple. A ...

  2. Java相对路径读取文件

    不管你是新手还是老鸟,在程序中读取资源文件总会遇到一些找不到文件的问题,这与Java底层的实现有关,不能算bug,只要方法得当,问题还是可以解决的. 项目的文件夹结构: repathtest ├─sr ...

  3. :“boost/serialization/string.hpp”: No such file or directory 错误

    主要原因是没有安装和配置boost库. 解决:http://www.programlife.net/boost-compile-and-config.html

  4. ASP.NET状态管理策略

    如果要想把信息存储在客户端那可以选择视图状态.控件状态.隐藏字段.cookie.和查询字符串. 1.web窗体页提供viewstate属性作为内置结构,在同一页的多个请求间自动保留值.他作为页面的隐藏 ...

  5. opscenter dashboard排错

    系统环境 opscenter 5.2 centOS 6.6 cassandra 2.0.x 问题 opscenter上的dashboard监控cassandra集群一段时间(大约1天)后总会停止显示. ...

  6. 现在觉得IT还挺有意思

    前两天刚刚接触编程,用的是C#.开始确实枯燥,但是今天的感觉就好多了,还挺有意思.根据老师讲的课程自己编写了小程序,运行起来还不错.在这里分享下. 关于时间安排的小程序: int sj; int aa ...

  7. YbRapidSolution.MVC项目首页缓存没有起作用

    Response.Cache.SetOmitVaryStar(true); 文件方面的内容,增加了这个语句 没有的话缓存没起作用,增加这个语句可提高系统性能. HomeController: usin ...

  8. MVC4中下拉菜单和单选框的简单设计方法

    举例一: @Html.LabelFor(model => model.Gender) @Html.DropDownListFor(model => model.Gender, new[] ...

  9. clock

    Prime Time中的clock分析包括: 1)Multiple clocks,clock from port/pin,virtual clock. 2)Clock network delay an ...

  10. C语言判断一个数是否是素数

    素数又称质数.所谓素数是指除了1和它本身以外,不能被任何整数整除的数,例如17就是素数,因为它不能被2~16的任一整数整除. 思路1):因此判断一个整数m是否是素数,只需把m被 2 ~ m-1 之间的 ...