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


Posted in Javascript onApril 23, 2013

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>
Javascript 相关文章推荐
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
Nov 17 Javascript
JS获取DropDownList的value值与text值的示例代码
Jan 07 Javascript
js动态添加表格数据使用insertRow和insertCell实现
May 22 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
vue v-model实现自定义样式多选与单选功能
Jul 05 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
Feb 15 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
Mar 10 Javascript
js对象与打印对象分析比较
Apr 23 #Javascript
你必须知道的Javascript知识点之&quot;深入理解作用域链&quot;的介绍
Apr 23 #Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 #Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
Apr 23 #Javascript
你必须知道的Javascript知识点之&quot;this指针&quot;的应用
Apr 23 #Javascript
jquery清空textarea等输入框实现代码
Apr 22 #Javascript
js计算精度问题小结
Apr 22 #Javascript
You might like
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
详解angularjs中如何实现控制器和指令之间交互
2017/05/31 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
2020/11/17 Javascript
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
使用python绘制人人网好友关系图示例
2014/04/01 Python
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python内置数据类型详解
2014/08/18 Python
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
python爬虫获取京东手机图片的图文教程
2017/12/29 Python
Python使用matplotlib实现基础绘图功能示例
2018/07/03 Python
对pandas中Series的map函数详解
2018/07/25 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
浅谈CSS3 动画卡顿解决方案
2019/01/02 HTML / CSS
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
旧时光糖果:Old Time Candy
2018/02/05 全球购物
生产内勤岗位职责
2013/12/07 职场文书
顶岗实习计划书
2014/01/10 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
医学生求职自荐书
2014/06/12 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
2014年体育教学工作总结
2014/12/09 职场文书
离婚上诉状范文
2015/05/23 职场文书
开工典礼致辞
2015/07/29 职场文书
会议主持词通用版
2019/04/02 职场文书
MySQL数据库之存储过程 procedure
2022/06/16 MySQL
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers