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 相关文章推荐
JS 控制非法字符的输入代码
Dec 04 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
JavaScript获取页面中第一个锚定文本的方法
Apr 03 Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
基于jquery实现轮播特效
Apr 22 Javascript
JS获取复选框的值,并传递到后台的实现方法
May 30 Javascript
修改ligerui 默认确认按钮的方法
Dec 27 Javascript
详解用函数式编程对JavaScript进行断舍离
Sep 18 Javascript
JavaScript创建防篡改对象的方法分析
Dec 30 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 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
967 个函式
2006/10/09 PHP
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
php数组删除元素示例
2014/03/21 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
PHP实现数据库统计时间戳按天分组输出数据的方法
2017/10/10 PHP
php实现支付宝当面付(扫码支付)功能
2018/05/30 PHP
一页面多XMLHttpRequest对象
2007/01/22 Javascript
jquery实现居中弹出层代码
2010/08/25 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
Jquery-1.9.1源码分析系列(十一)之DOM操作
2015/11/25 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
vue iview多张图片大图预览、缩放翻转
2019/07/13 Javascript
VUE路由动态加载实例代码讲解
2019/08/26 Javascript
vue.js自定义组件实现v-model双向数据绑定的示例代码
2020/01/08 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
Python django实现简单的邮件系统发送邮件功能
2017/07/14 Python
html5+css3进度条倒计时动画特效代码【推荐】
2016/03/08 HTML / CSS
CPB肌肤之钥美国官网:Clé de Peau Beauté
2017/09/05 全球购物
团组织关系介绍信
2014/01/12 职场文书
运动会通讯稿500字
2014/02/20 职场文书
《春雨》教学反思
2014/04/24 职场文书
2014乡镇党政班子四风问题思想汇报
2014/09/14 职场文书
大学生见习报告总结
2014/11/04 职场文书
个人先进事迹总结
2015/02/26 职场文书
写给老师的保证书
2015/05/09 职场文书
社团招新宣传语
2015/07/13 职场文书
Go语言基础map用法及示例详解
2021/11/17 Golang
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript