JS-改变页面的颜色之变化核心-获取六位的随机数

前言：从JS-改变页面的颜色（一）、JS-改变页面的颜色（二）、JS-改变页面的颜色（三）三个简单的小白例，我们可以轻而易举的看到起变化的核心是——十六进制颜色值的获取方式，所以，我们这里总结一下获取六位随机数的方法都有那些。

代码比较简单就不一个个解释了，不过总体的思路这里要简单的记录一下：

一：需求，获取六位的数字随机数

二：思路，关键就是怎么获取变化的数字

1）通过前端的随机函数，来获取随机数，可以获取一位或者多位然后通过循环来拼接成六位，或者我们想要的任何位数

2）获取随机数，除了通过随机函数，就是通过获取当前时间的毫秒后六位了，不过这样前面三位雷同的比较多，可以选择使用随机函数和毫秒数组合的方式来组合

3）除了前端获取也可以通过发送请求到后台来获取，这样不同的后台语言有不同的方式，不过最总还是少不了使用随机函数的，只是使用的方式会有所变化

4）参考资料Math对象的相关方法

5）这里提供了获取六位随机数的思路，不过我们可以举一反三，获取任何的随机数，也可以通过一定范围内的随机和数组结合获取我们想要的任何随机字符的组合，这也是前端简单的验证码实现的一种思路

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>Get Random Num</title>

    <script>

        function getRandomNum()

        {

           var randomNum = ""+Math.round(Math.random()*1000000);

           while(randomNum.length<6){randomNum="0"+randomNum;}

           console.info("randomNum is ========",randomNum);

           return randomNum;

        }

    </script>

</head>

<body bgcolor="LightGoldenRodYellow" align="center">

    <input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>Get Random Num</title>

    <script>

        function getRandomNum()

        {

           var randomNum = ""+Math.floor(Math.random()*1000000);;

           while(randomNum.length<6){randomNum="0"+randomNum;}

           console.info("randomNum is ========",randomNum);

           return randomNum;

        }

    </script>

</head>

<body bgcolor="LightGoldenRodYellow" align="center">

    <input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>Get Random Num</title>

    <script>

        function getRandomNum()

        {

           var randomNum = ""+Math.ceil(Math.random()*1000000);;

           while(randomNum.length<6){randomNum="0"+randomNum;}

           console.info("randomNum is ========",randomNum);

           return randomNum;

        }

    </script>

</head>

<body bgcolor="LightGoldenRodYellow" align="center">

    <input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>Get Random Num</title>

    <script>

        function getRandomNum()

        {

           var randomNum = (Math.random()+"").substr(2,6);

           console.info("randomNum is ========",randomNum);

           return randomNum;

        }

    </script>

</head>

<body bgcolor="LightGoldenRodYellow" align="center">

    <input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>Get Random Num</title>

    <script>

        function getRandomNum()

        {

           var randomNum = (Math.random()+"").substring(2,8);

           console.info("randomNum is ========",randomNum);

           return randomNum;

        }

    </script>

</head>

<body bgcolor="LightGoldenRodYellow" align="center">

    <input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>Get Random Num</title>

    <script>

        function getRandomNum()

        {

           var randomNum = "";

           for(var i=0;i<6;i++)

           {

            randomNum+=Math.floor(Math.random()*10);

           }

           console.info("randomNum is ========",randomNum);

           return randomNum;

        }

    </script>

</head>

<body bgcolor="LightGoldenRodYellow" align="center">

    <input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>Get Random Num</title>

    <script>

        function getRandomNum()

        {

           var randomNum = (function(t){ var str =''; while (t--){ str += ~~(Math.random()*10) }; return str; })(6);

           console.info("randomNum is ========",randomNum,~~(Math.random()*10));

           return randomNum;

        }

    </script>

</head>

<body bgcolor="LightGoldenRodYellow" align="center">

    <input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>Get Random Num</title>

    <script>

        function getRandomNum()

        {

           var randomNum = new Date().getTime()+'';

           randomNum = (Math.floor(Math.random() * 9) + 1).toString()+randomNum.substring(randomNum.length-5,randomNum.length);

           console.info("randomNum is ========",randomNum);

           return randomNum;

        }

    </script>

</head>

<body bgcolor="LightGoldenRodYellow" align="center">

    <input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>

</body>

</html>

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>Get Random Num</title>

    <script>

        function getRandomNum()

        {

           var randomNumTemp = /\d{5}$/.exec(+new Date()+'');

           var randomNum = (Math.floor(Math.random() * 9) + 1).toString()+randomNumTemp[0];

           console.info("randomNum is ========",randomNum);

           return randomNum;

        }

    </script>

</head>

<body bgcolor="LightGoldenRodYellow" align="center">

    <input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>

</body>

</html>

10.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>Get Random Num</title>

    <script>

        function getRandomNum()

        {

           var randomNum = Math.random()*900000|0+100000;

           console.info("randomNum is ========",randomNum);

           return randomNum;

        }

    </script>

</head>

<body bgcolor="LightGoldenRodYellow" align="center">

    <input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>

</body>

</html>

11.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>Get Random Num</title>

    <script>

        function getRandomNum()

        {

           var randomNum = Math.floor(Math.random()*900000 + 100000);

           console.info("randomNum is ========",randomNum);

           return randomNum;

        }

    </script>

</head>

<body bgcolor="LightGoldenRodYellow" align="center">

    <input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>

</body>

</html>

12.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>Get Random Num</title>

    <script>

        function getRandomNum()

        {

           var randomNum = (''+Math.random()).match(/\d{6}/)[0]

           console.info("randomNum is ========",randomNum);

           return randomNum;

        }

    </script>

</head>

<body bgcolor="LightGoldenRodYellow" align="center">

    <input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>

</body>

</html>

13.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>Get Random Num</title>

    <script>

        function getRandomNum()

        {

           var randomNum = (''+Math.random()).match(/[^0\.]\d{5}/)[0]

           console.info("randomNum is ========",randomNum);

           return randomNum;

        }

    </script>

</head>

<body bgcolor="LightGoldenRodYellow" align="center">

    <input type="button" value="Please click ME and F12 !" onclick="getRandomNum();"/>

</body>

</html>

JS-改变页面的颜色之变化核心-获取六位的随机数的更多相关文章

用JS改变页面中b标签的样式啊样式的等
用JS改变页面中b标签的样式啊样式的等 ,实际上是在标签内加上样式 ,用媒体查询的话 ,不能生效 <!DOCTYPE html> <html lang="en&qu ...
selenium java ，执行js改变页面
1.面对页面一些页面上的限制而导致某些选择按钮无法选中的问题很多时候由于页面上的一些限制会导致我们无法无法正常用webdriver来实现我们手动的正常操作,这时候我们可以通过执行js来适当的改变页面 ...
js 改变页面元素的内容
改变页面标签里的内容 (方法) innerText innerHTML (常用) 代码示例 <div></div> <p> 我是文字 <span>1 ...
js监听url的hash变化和获取hash值
当浏览器浏览器的url进行变化时,浏览器默认是会去服务器将相应的资源给请求下来的,在不阻止默认行为的前提下,使用给url加锚点的方式(hash模式),让浏览器不跳转. window.addEventL ...
JS-改变页面的颜色（一）
需求:点击页面的按钮,改变页面的颜色思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值简单的代码片段如下所示: &l ...
JS-改变页面的颜色（二）
需求:点击页面的按钮,改变页面的颜色思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值和第一个例 ...
JS-改变页面的颜色（三）
需求:点击页面的按钮,改变页面的颜色思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值和第二个例 ...
js如何实现动态点击改变单元格颜色？
js如何实现动态点击改变单元格颜色? 一.总结 1.通过table的rows属性,遍历表格所有行,然后通过cells属性,遍历每一行中的单元格. 2.遍历的过程中,动态的为每一个单元格定义单击事件,改 ...
JS改变input的value值不触发onchange事件解决方案（转）
方法(一)(转载的网络资料) 需要了解的知识首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...

随机推荐

odoo server命令行以及配置文件
odoo server 启动时 def main(args): check_root_user() odoo.tools.config.parse_config(args) check_postgre ...
Linux达人养成第一季
Linux简介一.Linux发展史二.开源软件简介三.Linux应用领域四.Linux学习方法五.Linux与Windows的不同六.字符界面的优势 Linux系统安装一.虚拟机安装二 ...
Git学习笔记（Mac Linux系统）
最近参与学校一个比赛,和队友一起做一个小项目,需要将代码传到Coding(国内git代码托管平台),因此这几天才正式入手git版本控制系统,在这里我就记录一下最近的学习git心得体验,一来分享一下自己 ...
About SQLite
About SQLite See Also... Features When to use SQLite Frequently Asked Questions Well-known Users Boo ...
在 AndroidStudio 中添加和使用 Support Library
添加Support Library 项目需要用到Support包时如何添加?其实非常简单. 第一步打开SDK Manager 确认安装了最新的Support Library 和 Support Re ...
php中奖概率算法，可用于刮刮卡，大转盘等抽奖算法
php中奖概率算法,可用于刮刮卡,大转盘等抽奖算法.用法很简单,代码里有详细注释说明,一看就懂 <?php /* * 经典的概率算法, * $proArr是一个预先设置的数组, * 假设数组为: ...
PowerBuilder 简介及应用 - 数据库系统原理
PowerBuilder 是一种企业级数据库前端应用和多层体系结构开发工具,友好的用户界面,功能强大的数据窗口,是一个集成开发环境. PB 的特点采用面向对象的编程方法和事件驱动的工作原理. 支持跨 ...
Angular $scope和$rootScope事件机制之$emit、$broadcast和$on
Angular按照发布/订阅模式设计了其事件系统,使用时需要“发布”事件,并在适当的位置“订阅”或“退订”事件,就像邮箱里面大量的订阅邮件一样,当我们不需要时就可以将其退订了.具体到开发中,对应着$s ...
Maven间接依赖冲突解决办法
如果项目中maven依赖太多,由于还有jar之间的间接依赖,所以可能会存在依赖冲突.依赖冲突大部分都是由于版本冲突引起的,查看maven的依赖关系,可以找到引起冲突的间接依赖如上图,通过Depend ...
使用 Device Mapper来改变Docker容器的大小
作者:Jérôme Petazzoni ( Docker 布道师) 译者:Mark Shao ( EMC 中国高级工程师) 如果在 CentOS . REHL . Fedor 或者其他默认没有 AUF ...

JS-改变页面的颜色之变化核心-获取六位的随机数

JS-改变页面的颜色之变化核心-获取六位的随机数的更多相关文章

随机推荐

热门专题