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

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

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

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

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

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

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

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

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

1.

<!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>

2.

<!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>

3.

<!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>

4.

<!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>

5.

<!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>

6.

<!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>

7.

<!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>

8.

<!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>

9.

<!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-改变页面的颜色之变化核心-获取六位的随机数的更多相关文章

  1. 用JS改变页面中b标签的样式啊 样式的等

    用JS改变页面中b标签的样式啊 样式的等    ,实际上是在标签内加上样式 ,用媒体查询的话 ,不能生效 <!DOCTYPE html> <html lang="en&qu ...

  2. selenium java ，执行js改变页面

    1.面对页面一些页面上的限制而导致某些选择按钮无法选中的问题 很多时候由于页面上的一些限制会导致我们无法无法正常用webdriver来实现我们手动的正常操作,这时候我们可以通过执行js来适当的改变页面 ...

  3. js 改变页面元素的内容

    改变页面标签里的内容 (方法) innerText innerHTML (常用)   代码示例 <div></div> <p> 我是文字 <span>1 ...

  4. js监听url的hash变化和获取hash值

    当浏览器浏览器的url进行变化时,浏览器默认是会去服务器将相应的资源给请求下来的,在不阻止默认行为的前提下,使用给url加锚点的方式(hash模式),让浏览器不跳转. window.addEventL ...

  5. JS-改变页面的颜色（一）

    需求:点击页面的按钮,改变页面的颜色 思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值 简单的代码片段如下所示: &l ...

  6. JS-改变页面的颜色（二）

    需求:点击页面的按钮,改变页面的颜色 思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值           和第一个例 ...

  7. JS-改变页面的颜色（三）

    需求:点击页面的按钮,改变页面的颜色 思路:一先画出最简单的页面,二想办法获取页面的body节点,三想办法修改body节点的背景颜色属性,四通过一个方法获取随机的颜色值           和第二个例 ...

  8. js如何实现动态点击改变单元格颜色？

    js如何实现动态点击改变单元格颜色? 一.总结 1.通过table的rows属性,遍历表格所有行,然后通过cells属性,遍历每一行中的单元格. 2.遍历的过程中,动态的为每一个单元格定义单击事件,改 ...

  9. JS改变input的value值不触发onchange事件解决方案 （转）

    方法(一)(转载的网络资料) 需要了解的知识     首先,我们需要了解onchange和onpropertychange的不同: IE下,当一个HTML元素的属性改变的时候,都能通过 onprope ...

随机推荐

  1. ODOO-10.0 错误 Could not execute command 'lessc'

    2017-01-05 20:24:12,473 4652 INFO None odoo.service.db: Create database `hello`. 2017-01-05 20:24:16 ...

  2. ✡ leetcode 172. Factorial Trailing Zeroes 阶乘中的结尾0个数--------- java

    Given an integer n, return the number of trailing zeroes in n!. Note: Your solution should be in log ...

  3. sql语句 decimal(18,0)什么意思

    decimal(18,0)18是定点精度,0是小数位数.decimal(a,b)a指定指定小数点左边和右边可以存储的十进制数字的最大个数,最大精度38.b指定小数点右边可以存储的十进制数字的最大个数. ...

  4. Install Debian note

    environment: already install xp,win7 and win8PE, left 87G space to install Debian, this space not fo ...

  5. qsort C++ VS2013 leetcode

    class Solution { private: static int compare(const void * a, const void * b) { return (*(int*)a - *( ...

  6. 更新日志(建议升级到2016.12.17) && 更新程序的方法

    更新程序的方法: 1,在控制面板里点击备份当前数据库文件到磁盘,把当天获取的信息从内存写到磁盘/存储卡.2,下载最新版的源码 wget -O "infopi.zip" " ...

  7. Jquery cxColor 示例演示

    今天第一次自己做调色板调用,看了半天官方的例子愣是没看懂,唉,码农老矣,尚能码否? 经过对官方下载的示例一删一浏览终于弄出来了,这么简单的东西,官方的Demo逼格也太高了 上代码: <!DOCT ...

  8. 使用jQuery Autocomplete(自动完成)插件

    jQuery 的Autocomplete(自动完成.自动填充)插件有不少,但比较下来我感觉,还是bassistance.de 的比较强大,我们就来写一些代码感受一下. 最简单的Autocomplete ...

  9. ios 利用airprint实现无线打印（配合普通打印机）

    很多时候,我们不可能为了一个打印功能而去替换打印机,来支持无线打印. 找了很久,终于找到了一种解决方案,来适应大多数没有带wifi功能的打印机支持无线打印. 前提: 有wifi路由器:因为手机要打印, ...

  10. HackerRank "Flatland Space Stations"

    A bit Greedy can achieve O(m) - the mid station between 2 adjacent cities has the longest distance w ...