视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
js随机颜色代码的多种实现方式_javascript技巧
2020-11-27 21:08:52 责编:小采
文档


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

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

实现1
代码如下:
var getRandomColor = function(){

return '#' +
(function(color){
return (color += '01234567abcdef'[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,'01234567abcdef',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 '#'+'01234567abcdef'.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 这个数值的。
代码如下:
以下为引用的内容:




hex的最大值

window.onload = function () {
alert(parseInt("0xffffff",16).toString(10));
};



实现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);
}

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

实战一下:
代码如下:
以下为引用的内容:





初级饼图


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, 0, 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 startAngle = drawSector(300,300,100,paper,ocs[i],startAngle);
}

};


初级2324234饼图


初级23232饼图





下载本文
显示全文
专题