js常用方法和一些封装(2) -- 随机数生成

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

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


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

先上小案例的截图:

cfc240f6f28994772423045639c4cc7a.gif

这个例子是先画上一堆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小巧而灵活,是不是觉得很有趣呢?

本章结束 ...

相关文章
|
1天前
|
缓存 前端开发 JavaScript
React和Next.js开发常见的HTTP请求方法
React和Next.js开发常见的HTTP请求方法
5 0
|
1天前
|
前端开发 JavaScript
前端 JS 经典:Math 常用方法汇总
前端 JS 经典:Math 常用方法汇总
5 0
|
1天前
|
前端开发 JavaScript
前端 js 经典:Object 常用原生方法
前端 js 经典:Object 常用原生方法
9 2
|
1天前
|
前端开发 JavaScript
前端 js 经典:array 原生方法
前端 js 经典:array 原生方法
7 1
|
2天前
|
JavaScript 前端开发
JS中正则方法的使用 - 蓝易云
以上就是JavaScript中正则方法的基本使用。这些方法可以用于执行复杂的字符串处理和验证任务。
13 1
|
2天前
|
JavaScript 前端开发
JavaScript的`apply`方法:函数的“应用”与“调用”
JavaScript的`apply`方法:函数的“应用”与“调用”
|
2天前
|
JavaScript 前端开发
JavaScript的`bind`方法:函数的“复制”与“定制”
JavaScript的`bind`方法:函数的“复制”与“定制”
|
2天前
|
JavaScript 前端开发
JavaScript的`call`方法:实现函数间的调用!
JavaScript的`call`方法:实现函数间的调用!
|
2天前
|
设计模式 JavaScript 前端开发
JavaScript原型模式:实现对象共享属性和方法!
JavaScript原型模式:实现对象共享属性和方法!
|
3天前
|
JavaScript 前端开发 索引
JavaScript array 原生 reduce 方法的模拟实现
JavaScript array 原生 reduce 方法的模拟实现
8 2