如何用Javascript获取随机颜色.docVIP

如何用Javascript获取随机颜色 本文将谈到利用Javascript获取随机颜色，这里我们需要知道做Javascript获取随机颜色主要是在作图时方便展示，希望大家能从本文获得帮助。 在制作饼图或标签云时，我们通常需要很多颜色，方法有二。一是准备一组漂亮的候选颜色，二是随机生成颜色。在数量很多或不明确时，我想后者就是唯一的出路了。谷歌了一下，整理如下，按由浅入深的顺序排列。 实现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 Atotype.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?i5???null?:?a[Math.floor(Math.random()*16)]?}).join();? ? }? 这个要求我们对数组做些扩展，map将返回一个数组，然后我们再用join把它的元素串成字符。 实现4 var?getRandomColor?=?function(){?? ? return?#+Math.floor(Math.random().toString(16);? ? }? 这个实现非常逆天，虽然有点小bug。我们知道hex颜色值是从#000000到#ffffff，后面那六位数是16进制数，相当于0x000000到0xffffff。这实现的思路是将hex的最大值ffffff先转换为10进制，进行random后再转换回16进制。我们看一下，如何得这个数值的。 !doctype?html? meta?charset=utf-8/? meta?http-equiv=X-UA-Compatible?content=IE=8/? titlehex的最大值/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()*0xffffff0).toString(16);? ? }? 基本实现4的改进，利用左移运算符把0xffffff转化为整型。这样就不用。由于左移运算符的优先级比不上乘号，因此随机后再左移，连Math.floor也不用了。 实现6 var?getRandomColor?=?function(){? ? return?#+(function(h){??? ? return?new?Array(7-h.length).join(0)+h? ? })((Math.random()*0.toString(16))? ?