专栏首页web编程技术分享js常用方法和一些封装(2) -- 随机数生成

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 条评论
登录 后参与评论

相关文章

  • 【H5 音乐播放实例】第二节 音乐详情页制作(2)1.2 音乐盒子区域

    剽悍一小兔
  • 【H5 音乐播放实例】第五节 音轨制作

    剽悍一小兔
  • js常用方法和一些封装(1)1.字符串相关2.数组相关

    剽悍一小兔
  • javascript对象查看器

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb231...

    用户1183026
  • js获取input上传文件的文件名和扩展名的方法

    使用 js 可以获取 input 上传文件的文件名和扩展名,这里我整理一下具体方法:

    德顺
  • 学界 | Yoshua Bengio等人提出MILABOT:强化学习聊天机器人

    选自arXiv 作者:Iulian V. Serban等 机器之心编译 参与:路雪、李泽南 The Alexa Prize 是亚马逊在对话人工智能领域中发起的一...

    机器之心
  • 从零开始学习React-属性绑定(三)

    前面两节用的是HBuilder编辑器,很多童鞋说Visual Studio Code很好用,确实如此,因为平时开发用习惯了前者,写教程的时候,为了方便大家体验,...

    祈澈菇凉
  • golang goquery selector(选择器) 示例大全

    最近研究Go爬虫相关的知识,使用到goquery这个库比较多,尤其是对爬取到的HTML进行选择和查找匹配的内容时,goquery的选择器使用尤其多,而且还有很多...

    飞雪无情
  • WebMagic爬取指定内容和一些特性介绍(附演示代码)

    可能有很多小伙伴不了解Xpath语法是什么,我就给大家稍微介绍下,想要了解更多可以百度或者后台联系我,XPath 是一门在 XML 文档中查找信息的语言。XPa...

    框架师
  • 在SAP WebIDE里开发一个React component

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券