您现在的位置:首页 >> 前端 >> 内容

CSS——生成随机数验证

时间:2016/12/30 9:32:00 点击:

  核心提示:这是很实用的一个例子,不过用的是JavaScript实现的,还有很多可以改进的地方stronghtmlheadmeta charset=UTF-8title生成随机验证码/titlestylebutt...

这是很实用的一个例子,不过用的是JavaScript实现的,还有很多可以改进的地方

<strong><html>
        <head>
                <meta charset="UTF-8">
                <title>生成随机验证码</title>
                <style>
                        button{
                                border: 1px solid #CD5C5C;
                                border-radius:5px ;
                                padding: 10px;
                                font-family: "微软雅黑";
                                float: left;
                        }
                        .txt{
                                width: 100px;
                                height: 25px;
                                border: 1px solid #0000FF;
                                padding: 5px;
                                float: left;
                                margin-left: 30px;
                                border-radius: 5px;
                        }
                </style>
                <script>
                        window.onload = function(){
                                var  oBtn = document.getElementById('btn');
                                var oTxt  = document.getElementById('txt');
                                 
                                //生成随机数
                                function rund(n,m){
                                        return Math.floor(Math.random()*(m-n)+n);
                                }
                                //去除数组中重复的数字
                                function findInArr(n,arr){ 
                                                for(var i=0; i<arr.length; i++){
                                                                if( arr[i] == n){
                                                                        return true
                                                                }
                                                }
                                                return false;
                                }
 
                                oBtn.onclick = function(){
                                        //每次点击的时候执行一遍
                                           var num = [];
                                                while(num.length<6){
                                                        var m = rund(0,10); //随机数,0-9 的随机数
                                                         if(!findInArr(m,num)){
                                                                 num.push(m)
                                                         }
                                                }
                                         var str = num.splice(" ");
                                              num = str.join(" ");
                                         oTxt.innerHTML=num;
                                }
                        }
                </script>
        </head>
        <body>
                <button id="btn">获取验证码</button>
                <p class="txt" id="txt"></p>
        </body>
</html></strong>
优点:这个去重的思想,在很多的地方都试用

不足:可以在进一步封装,可以使用jquery进行简化

Tags:CS SS S— —— 
作者:网络 来源:李建敏 廊坊师范学院
  • 上一篇:web基础
  • 下一篇:登陆框封装