用js实现验证码

最新推荐文章于 2020-08-13 12:03:42 发布

「已注销」

最新推荐文章于 2020-08-13 12:03:42 发布

阅读量317

点赞数

本文链接：https://blog.csdn.net/awesomedy/article/details/79339375

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>数学对象</title>
    <script>
        var number="";
        window.οnlοad=function (){
            var content=document.getElementsByClassName("num")[0];
            shownumber(content);
            //点击看不清楚  切换
            var spankan=document.getElementsByClassName("spanno")[0];
            spankan.οnclick=function (){
                shownumber(content);
            }
            //获取按钮
            var btn=document.getElementsByClassName("btn")[0];
            btn.οnclick=function (){
               //获取文本
                var text=document.getElementById("contxt");
                if(text.value==number)
                {
                  alert("验证正确！");
                }
                else{
                    alert("验证错误！");
                }
            }
        }
        function shownumber(obj)
        {
            obj.innerHTML="";
            number="";
            for(var i=0;i<6;i++)
            {
                var size=Math.random()*10+20;
                var color="rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*1+0.6)+")";
                var numtxt=Math.floor(Math.random()*10);
                number+=numtxt;
                var num="<span class='txt' style='color:"+color+"; font-size: "+size+"px;'>"+numtxt+"</span>";
                obj.innerHTML+=num;
            }
        }
    </script>
    <style>
        .num{
            display: inline-block;
            width: 150px;
            line-height: 45px;
            height: 45px;
            border: 1px solid silver;
            background-image: url("1.png");
            background-size: 150px 40px;
        }
        .spanno{
            position: absolute;
            top: 29px;
            display: inline-block;
            color: blue;
            line-height: 40px;
            font-size: small;
            text-decoration: underline;
        }
        .txt{
            padding: 5px 4px;
            font-weight: bold;
        }
        .result{
           margin-top: 20px;
        }
    </style>
</head>
<body>
<div class="num">

</div>
<span class="spanno">看不清....</span>
<div class="result">
    <input type="text" id="contxt"/><button class="btn">确定</button>
</div>
</body>
</html>