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

前言：从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>

 

posted on 2016-08-25 22:48  godtrue  阅读(1769)  评论(0)  编辑  收藏  举报

Copyright © 2024 godtrue
Powered by .NET 9.0 on Kubernetes Powered By博客园