原生js--验证码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>验证码</title>
    <style>
        .block{
            margin:auto;
            width:300px;
            height:100px;
        }
        .divimg{
            display: inline-block;
            border: 1px solid silver;
            width:200px;
            height:60px;
            background: url("./img/1.png")no-repeat;
            overflow: hidden;
            background-size: cover;
            text-align: center;
            line-height: 60px;
        }
        .divimg>span{
            position:relative;
            display: inline-block;
            width:20px;
        }
        .fontbtn{
            color: #0000ff;
            cursor: pointer;
            background-color: transparent;
            outline: none;
            border:none;
        }
    </style>

    <script>
        window.onload=function(){
            createElement();
            var block=document.getElementsByClassName("block")[0];
            var txt=document.getElementsByClassName("divimg")[0];
            var fontbtn=document.getElementsByClassName("fontbtn")[0];
            var input=document.getElementsByClassName("input")[0];
            var yanzhengbtn=document.getElementsByClassName("yanzhengbtn")[0];
            addData (txt);
            fontbtn.onclick=function(){
                addData (txt);
            }
            yanzhengbtn.onclick=function(){
                if(noval.toLowerCase()==input.value.toLowerCase()){
                    alert("验证成功");
                }
                else{
                    alert("验证码输入错误");
                    addData (txt);
                }
                input.value="";
            }
            txt.onclick=function(){
                addData (txt);
            }
        };
        function createElement(){
            var block=document.createElement("div");
            block.className="block";
            document.body.appendChild(block);

            var divimg=document.createElement("div");
            divimg.className="divimg";
            block.appendChild(divimg);

            var span=document.createElement("button");
            span.className="fontbtn";
            block.appendChild(span);
            span.innerHTML="看不清.....";

            var input=document.createElement("input");
            input.className="input";
            block.appendChild(input);

            var btn=document.createElement("button");
            btn.className="yanzhengbtn";
            block.appendChild(btn);
            btn.innerHTML="验证";
        }
        function addData (par){
            noval="";
            var str="";
            for( var i=0;i<8;i++){
                var randowCode=Math.random();
                var color="rgb("+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+","+parseInt(Math.random()*255)+")";
                var rotate=Math.random()*45*(parseInt(Math.random()*2)==0?-1:1);
                var top=Math.random()*10*(parseInt(Math.random()*2)==0?-1:1);
                var left=Math.random()*10*(parseInt(Math.random()*2)==0?-1:1);
                var fontsize=parseInt(Math.random()*15+20);

                if(randowCode<0.3){
                    var s=Math.floor(Math.random()*10);
                    str+="<span style='color:"+color+";transform:rotatez("+rotate+"deg);top:"+top+"px;left:"+left+"px;font-size:"+fontsize+"px;'>"+s+"</span>";
                    noval+=s;
                }
                else if(randowCode>=0.3&&randowCode<0.6){
                    var letter=Math.floor(Math.random()*26+97);
                    var s=String.fromCharCode(letter);
                    str+="<span style='color:"+color+";transform:rotatez("+rotate+"deg);top:"+top+"px;left:"+left+"px;font-size:"+fontsize+"px;'>"+s+"</span>";
                    noval+=s;
                }
                else{
                    var letter=Math.floor(Math.random()*26+65);
                    var s=String.fromCharCode(letter);
                    str+="<span style='color:"+color+";transform:rotatez("+rotate+"deg);top:"+top+"px;left:"+left+"px;font-size:"+fontsize+"px;'>"+s+"</span>";
                    noval+=s;
                }
            }
            console.log(noval);
            par.innerHTML=str;
        }
    </script>
</head>
<body>
</body>
</html>
猜你喜欢
