前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >js常用方法和一些封装(2) -- 随机数生成

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

作者头像
剽悍一小兔
发布2018-05-17 12:09:49
2.9K0
发布2018-05-17 12:09:49
举报
文章被收录于专栏:web编程技术分享

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

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

先上小案例的截图:

1.gif

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

随机数字

代码语言:javascript
复制
/**
 * 获取 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;
};

随机颜色

代码语言:javascript
复制
/**
 *  获取随机颜色(不支持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的代码:

代码语言:javascript
复制
  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元素。

代码语言:javascript
复制
document.createElement("div");

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

本章结束 ...

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

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2016.08.11 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 随机数字
  • 随机颜色
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档