简单原生js验证码

最新推荐文章于 2023-03-12 20:29:49 发布

SunShineLove1314

最新推荐文章于 2023-03-12 20:29:49 发布

阅读量203

点赞数

分类专栏： js 文章标签：空闲手写

本文链接：https://blog.csdn.net/SunShineLove1314/article/details/88630223

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

点击哦
点击随机生成

在这里插入图片描述

html部分

<!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>
        .click{
            position:relative;
            width:200px;
            height:50px;
            border:3px solid green;
        }
        .numm{
            position:absolute;
            left:0;
            top:0;
            width:100%;
            height:100%;
            background:transparent;
            z-index:100;
            display:flex;
            justify-content: center;
        }
        .lines{
            position:absolute;
            justify-content: space-between;
            overflow: hidden;
            display:flex;
            left:0;
            top:0;
            width:100%;
            height:100%;
        }
    </style>
</head>
<body>
    <div class='warp'>
        <div>
            <p>示例代码</p>
            
        </div>
        <div class='rit'>
            <!-- 点击更换 -->
            <div class='click'>
                <div class='numm'>
                    <b>1</b>
                    <b>2</b>
                    <b>3</b>
                    <b>4</b>
                </div>
                <div class='lines'>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

js部分

<script>
    //随机颜色数组
    arr1=["green","red","blue","#53da33","#AA0000","#FFBB00"];
    //随机字符
    arr2=[
        'a','b','c','d','e','f','g','h','i','j','k','l','m',
        'o','p','q','r','s','t','x','u','v','y','z','w','n',
        '0','1','2','3','4','5','6','7','8','9'
        ],
    //随机字体
    font=[
        "Times New Roman",
        "Georgia",
        "Serif",
        "sans-serif",
        "arial",
        "tahoma",
        "Hiragino Sans GB"
        ];
    //随机函数
    function randint(n,m){
        var c = m-n+1;
        var num = Math.random() * c + n;
        return  Math.floor(num);
    };
    //随机生成线条
    function creatline(){
        document.querySelector('.lines').style.background=`rgba(${randint(0, 253)},${randint(0, 253)},${randint(0, 253)},0.3)`
        for(var i=0;i<randint(4, 13);i++){
            let ld=document.createElement('span')
            ld.style.cssText="float:left"
            ld.style.width=Math.random()>0.5?'1px':'2px';
            ld.style.height=randint(0, 70)+'px';
            ld.style.transform=`rotate(${randint(-90, 90)}deg)`
            ld.style.backgroundColor=`rgba(${randint(0, 253)},${randint(0, 253)},${randint(0, 253)},1)`
            document.querySelector('.lines').appendChild(ld);
        }
    }
    //随机生成字体
    function creatfont(){
        for(var i=0;i<4;i++){
        	 document.querySelector('.numm').children[i].innerHTML=arr2[randint(0, 35)]
            document.querySelector('.numm').children[i].style.cssText=`font-size:${randint(24, 48)}px;color:${arr1[randint(0, 5)]};font-family:${font[randint(0, 6)]};transform:rotate(${randint(-90, 90)}deg);display:block;float:left;margin-left:${randint(10, 20)}px`
        }
    }
    //删除线条
    function clearline(){
        var lines=document.querySelector('.lines').children;
        for(var i=0;i<lines.length;i++){
            lines[i].remove()
        }
    }
    creatfont()
    creatline()
   //点击调用
    document.querySelector('.rit').onclick=function(){
        clearline()
        creatfont()
        creatline()
    }
</script>