龙空技术网

JS常用方法和一些封装:随机数生成

程序猿星球 798

前言:

如今大家对“随机颜色代码js”可能比较讲究,兄弟们都需要剖析一些“随机颜色代码js”的相关内容。那么小编在网络上收集了一些对于“随机颜色代码js””的相关资讯,希望小伙伴们能喜欢,看官们快快来了解一下吧!

任何编程语言,随机数都是必不可少的,我在开发过程中,尤其在自己做一些小玩意的时候,就经常使用随机数,后来发现每次使用都懒得写,直接去网上搜一个,拿过来就用了。

可是时间一长,发现总是去网上搜不太好,就干脆做一个总结,现在分享出来。顺便附上一个小案例来说明。

先上小案例的截图:

这个例子是先画上一堆div,然后给每一个div绑定一个变颜色的事件,当然,颜色是随机生成的。

随机数字

/**

* 获取 0 ~ num 的随机数(闭区间)

*/

function randomNum(num){

return Math.floor(Math.random()*(num+1));

};

/*

* 获取范围随机数 (闭区间)

*/

function randomRange(start,end){

return Math.floor(Math.random()*(end-start+1))+start;

};

随机颜色

/**

* 获取随机颜色(不支持IE678) 因为rgba是IE9+才支持的

*/

function randomColor(){

var r = Math.floor(Math.random()*256);

var g = Math.floor(Math.random()*256);

var b = Math.floor(Math.random()*256);

return "rgb("+r+","+g+","+b+")";//IE7不支出rgb

};

/**

* 获取随机颜色(支持任意浏览器)

*/

function randomColor16(){

//0-255

var r = randomNum(255).toString(16);

var g = randomNum(255).toString(16);

var b = randomNum(255).toString(16);

//255的数字转换成十六进制

if(r.length<2)r = "0"+r;

if(g.length<2)g = "0"+g;

if(b.length<2)b = "0"+b;

return "#"+r+g+b;

};

顺便再贴上一开始的小demo的代码:

for(var x = 0 ; x < 29 ; x++){

for(var y = 0 ; y < 23 ; y++){

var div = document.createElement("div");

document.body.appendChild(div);

div.style.position = 'absolute';

div.style.width = '23px';

div.style.height = '23px';

div.style.left = x * 23 + 'px';

div.style.top = y * 23 + 'px';

div.style.background = '#CCC';

div.style.border = '1px solid #666';

div.onclick = function(){

this.style.background = randomColor16();

this.onclick = null; //取消该div的点击事件

}

}

}

注:以下代码代表创建一个div元素。

document.createElement("div");

js小巧而灵活,是不是觉得很有趣呢?

标签: #随机颜色代码js #js随机数生成1到100整数 #js随机生成四位数字的方法是什么