js随机颜色代码的多种实现方式

JS随机颜色有很多地方要用到：比如大家看到很多标签连接都是五颜六色。那就需要到这个了。下面开始：

方法思路总共有二。一是准备一组漂亮的候选颜色，二是随机生成颜色。

实现1


代码如下:

var getRandomColor = function(){

return  '#' +   
    (function(color){   
    return (color +=  '0123456789abcdef'[Math.floor(Math.random()*16)])   
      && (color.length == 6) ?  color : arguments.callee(color);   
  })('');   
}

随机生成6个字符然后再串到一起，闭包调用自身与三元运算符让程序变得内敛，初心者应该好好学习这种写法。

实现2

代码如下:

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颜色值的字符串提取出来，并利用第三个参数来判断是否还继续调用自身。

实现3

代码如下:

以下为引用的内容：

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把它的元素串成字符。

实现4


代码如下:

以下为引用的内容：

var getRandomColor = function(){

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

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


代码如下:

以下为引用的内容：

<!doctype html>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
<title>hex的最大值</title>
<script type="text/javascript" charset="utf-8">
  window.onload = function () {
     alert(parseInt("0xffffff",16).toString(10));
  };
</script>
<div id="text"></div>

实现5


代码如下:

以下为引用的内容：

var getRandomColor = function(){

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

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

实现6


代码如下:

以下为引用的内容：

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值不足5位的问题，直接在未位补零。

实现7


代码如下:

以下为引用的内容：

var getRandomColor = function(){

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

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

实战一下：


代码如下:

以下为引用的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="zh-cn">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>初级饼图</title>
    <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script>
    <script type="text/javascript" charset="utf-8">
      var getRandomColor = function(){
        return '#'+('00000'+(Math.random()*0x1000000<<0).toString(16)).substr(-6);
      }

window.onload = function () {
        var paper = Raphael("canvas", 700, 700);
        paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});//设置画板

function drawSector(cx,cy,r,paper,oc,startAngle){
          var angleplus = 360 * oc / 100,//360度乘以40%
          startAngle = startAngle || 0,
          endAngle =startAngle+angleplus,
          rad = Math.PI / 180,
          x1 = cx + r * Math.cos(-startAngle * rad),
          x2 = cx + r * Math.cos(-endAngle * rad),
          y1 = cy + r * Math.sin(-startAngle * rad),
          y2 = cy + r * Math.sin(-endAngle * rad);
          var path = ["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"],

path = path.join(" ");
          paper.path({fill:getRandomColor()},path);
          return endAngle
        }
        var ocs = [40,25,17,10,8];
        for(var i=0,l=ocs.length,startAngle;i<l;i++){
          startAngle = drawSector(300,300,100,paper,ocs[i],startAngle);
        }

};
    </script>
    <style type="text/css" media="screen">
      #canvas {
        width: 700px;
        height: 700px;
      }
    </style>
    <title>初级2324234饼图</title>
  </head>
  <body>
    <p>初级23232饼图</p>
    <div id="canvas"></div>
  </body>
</html>

赞 (0)

相关推荐

  • JS实现随机颜色的3种方法与颜色格式的转化

    前言 相信大家都知道在前端的颜色表示方式有多种,一种是以3个或6个十六进制的数子表示,一种是RGB的数字形式,还有一种是直接以颜色的英文来表示.这三种都是不支持透明色的.所以还有RGBA的表式方式,在RGB的的基础上加入了Alpha透明,使网页可以展现更加复杂绚丽的效果. 随机颜色 在平时的码农日常中,经常会用到求随机颜色的地方,下面是我总结的几种简单的实现随机颜色的方式: 十六进制格式(#000000-#FFFFFF) 第一种是比较简单的方法,这种方法是先随机生成ffffff以内16进制数,然

  • js代码实现随机颜色的小方块

    下面一段代码就是用js实现的随机颜色的小方块,不多说了代码很简单,直接上代码了. /**/js注释已删 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF- "> <meta charset="utf- "> <title>koringz&l

  • 基于javascript实现随机颜色变化效果

    本文实例讲解了基于javascript实现随机颜色变化效果,分享给大家供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>随机颜色变化效果</title> <style type="text/css"> #thediv{

  • 一个js随机颜色脚本（用于标签页面，也可用于任何页面）

    看见有人要这个东西,发上来.237个字节的东西.很小吧? 把下面代码添加到tag.asp的<div id="mainContent-bottomimg">前面即可. 这么简单的问题就别问什么问题了. 其实你也可以添加到header.asp或footer.asp中.不过这样你整个页面的全部span区域将全为随机颜色了. 演示 http://www.hljsh.com/tag.asp 效果是一样的.不过我的演示是用asp实现的.我发的是用JS实现的.效果一样. 复制代码 代码如

  • javascript生成随机颜色示例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu

  • js实现九宫格的随机颜色跳转

    js实现九宫格的随机颜色跳转

    效果如下: 图(1)  初始图 图(2)  开始闪 代码如下: <!DOCTYPE html> <html> <head> <title>九宫格</title> <style type="text/css"> div{ width:190px; height:190px; background:#FFA600; float:left; margin:10px; border-radius: 10px; } body

  • js生成随机颜色方法代码分享（三种）

    话不多说,请看代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn1">调用第一种</button> <button id="bnt2&quo

  • JavaScript实现简单生成随机颜色的方法

    JavaScript实现简单生成随机颜色的方法

    本文实例讲述了JavaScript实现简单生成随机颜色的方法.分享给大家供大家参考,具体如下: 如果要做出如下效果,每次刷新网页则产生一种颜色 其实非常简单,产生随机颜色的根本核心就是随机构造出一个六位数,JavaScript的随机数的问题 而且这个六位数的每一个数位0~f之内,因此就有了如下的方法: 1.首先是一个HTML布局,p标签是是用来放当前颜色的,div的背景颜色就是这个颜色 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN&quo

  • 基于JavaScript实现随机颜色输入框

    基于JavaScript实现随机颜色输入框

    废话不多说了额,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> table{width:500px;height:400px;} table td{width:100px;height:50px;} </style> <script> window.onl

  • js获取随机颜色值的函数

    收集一个函数:获取随机颜色值 复制代码 代码如下: function getRandomColor(){ return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); } 说明: 1.16777215为16进制的颜色ffffff转成10进制的数字 2.>>数字取整 3.转成16进制不足6位的以0来补充 在线演示代码: js随机颜色 document

随机推荐