原生js实现生成随机验证码=------Sestid

迷南。 2023-10-09 03:12 23阅读 0赞

**效果图：**

![20190925115435107.png][]

**全部代码：**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            /* 样式 */
            div {
                width: 100px;
                height: 50px;
                background: #ccc;
                
                text-align: center;
            }
            div span{
                font-size: 20px;
                line-height: 50px;
                color: rgb(200, 90, 100)
            }
        </style>
        <script>
            window.onload = function () {
                //获取元素
                var div = document.getElementsByTagName('div')[0];
                var span = div.getElementsByTagName('span');
                //封装随机函数
                function rand() {
                    //字符串
                    var arr = '0123456789qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM';
                    //字符串分割成数组
                    var str = arr.split('', 62);
                    var inner='';
                    //循环添加标签   并利用随机方法随机取到数组里面的值
                    for(var i=0;i<4;i++){
                        var index = Math.floor(Math.random() * str.length);
                        inner += '<span>'+str[index]+'</span>';
                    }
                    //添加到div里面
                    div.innerHTML=inner;
                    for(var i=0;i<span.length;i++){
                        //随机字体大小
                        span[i].style.fontSize=(Math.random() * (30-20)+20)+'px';
                        //随机生成颜色
                        var r=Math.floor(Math.random() * 255);
                        var g=Math.floor(Math.random() * 255);
                        var b=Math.floor(Math.random() * 255);
                        span[i].style.color='rgb('+r+','+g+','+b+')';
                    }
                }
                   rand();//调用函数
                   //添加点击事件
                div.onclick = function () {
                    rand();//调用函数
                }
    
            }
        </script>
    </head>
    
    <body>
        <div></div>
    </body>
    
    </html>

[20190925115435107.png]: https://img-blog.csdnimg.cn/20190925115435107.png