任何编程语言,随机数都是必不可少的,我在开发过程中,尤其在自己做一些小玩意的时候,就经常使用随机数,后来发现每次使用都懒得写,直接去网上搜一个,拿过来就用了。
可是时间一长,发现总是去网上搜不太好,就干脆做一个总结,现在分享出来。顺便附上一个小案例来说明。
先上小案例的截图:
这个例子是先画上一堆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小巧而灵活,是不是觉得很有趣呢?
本章结束 ...
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
2016-12-09 小兔Java教程 - 三分钟学会Java文件上传