简单易上手的原生随机验证码

最新推荐文章于 2022-12-28 14:28:28 发布

终端鹿

最新推荐文章于 2022-12-28 14:28:28 发布

阅读量235

点赞数 1

分类专栏： web 文章标签： html5 javascript

本文链接：https://blog.csdn.net/qq_41949807/article/details/109562192

版权

web 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

给大家分享一个随机验证码的写法

<!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>
        .box{
            width: 105px;
            height: 45px;
            text-align: center;
            line-height: 45PX;
            background-color: #ccc;
            margin: 0 auto;
        }

    </style>
</head>
<body>
    <div class="box">
        <span>Y</span><span>w</span><span>2</span><span>a</span>
    </div>
    <script>
        // a-z A-Z 0-9
        // 从以上这些符号中随机产生4个符号拼接 
        var str ='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
        var box  = document.getElementsByClassName("box")[0];
        var spans = document.getElementsByTagName("span");
        for(var i=0;i<4;i++){
            var index =Math.round(Math.random()*61);
            // str [index]

            var r = Math.round(Math.random()*255);//生成0-255随机整数
            var g = Math.round(Math.random()*255);
            var b = Math.round(Math.random()*255);
            var fontSize =Math.floor(Math.random()*21)+20;
            console.log(r,g,b,fontSize);
            spans[i].innerHTML = str[index];
            spans[i].style.color = "rgb("+r+","+g+","+b+")";
            spans[i].style.fontSize = fontSize +"px";
        } 
    </script>
</body>
</html>