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

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

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

先上小案例的截图:

1.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小巧而灵活,是不是觉得很有趣呢?

本章结束 ...

剽悍一小兔,电气自动化毕业。 参加工作后对计算机感兴趣,深知初学编程之艰辛。 希望将自己所学记录下来,给初学者一点帮助。

免责声明: 博客中所有的图片素材均来自百度搜索,仅供学习交流,如有问题请联系我,侵立删,谢谢。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HTML5学堂

JavaScript | 动画显示比例的投票效果

HTML5学堂(码匠):一个简洁实用的投票效果如何使用原生JS来进行实现呢?同时动画显示比例的形式又需要依靠哪些技术来实现?是数学对象还是字符串操作,又或者是计...

3446
来自专栏华章科技

技巧:Excel用得好,天天没烦恼

分析公司DarkHorse Analytics 从美国劳工统计处获得数据,并制作了这张二十四小时会唿吸的地图,显示曼哈顿的工作与在宅人口。

1124
来自专栏程序员的诗和远方

20180818_ARTS_week08

这道题是要把字符串中的数字变成 int,通常的做法是遍历字符串,然后判断是不是在 0~9 中,如果把 0~9 放数组里每次循环检查感觉不是太好,时间复杂度是个 ...

651
来自专栏小狼的世界

YUI3 CSS框架学习

改变最大的我觉得是Grids部分,YUI2中以模版的方式提供给我们调用,功能中多选项也很多,而且配合Grid Build Tool,可以快速的生成复杂的页面结构...

1103
来自专栏Android知识点总结

D5-Android绘图之让图形动起来

1002
来自专栏数据小魔方

超强脑洞第三弹之——ggplot构造瀑布图

对,就是瀑布图,你没看错。而且是使用ggplot现有图层叠加构造,并没有用任何ggplot的外挂插件。 作图理念是在数据源的构造上,方法与《Excel图表之道》...

2883
来自专栏GreenLeaves

FactoryMethod工厂方法模式升级成AbstractFactory抽象工厂模式

具体参考抽象工厂(AbstractFactory)模式-创建型模式,本文在FactoryMethod工厂方法模式(创建型模式)的基础上进行业务进一步抽象,不做详...

943
来自专栏24K纯开源

QT中获取选中的radioButton的两种方法

QT中要获取radioButton组中被选中的那个按钮,可以采用两种如下两种办法进行: 方法一:采用对象名称进行获取 代码: 1 QRadioButt...

2375
来自专栏前端说吧

JS-抽奖系统-实现原理

9414
来自专栏JackieZheng

初探JavaScript(二)——JS如何动态操控HTML

  除去五一三天,我已经和《JavaScript Dom编程艺术》磨合了六天,第一印象很好。慢慢的,我发现这是一块排骨,除了肉还有骨头。遇到不解的地方就会多看几...

2605

扫码关注云+社区

领取腾讯云代金券