验证码

最新推荐文章于 2024-07-16 09:00:00 发布

Sixteen_

最新推荐文章于 2024-07-16 09:00:00 发布

阅读量339

点赞数

分类专栏：验证码文章标签：验证码

本文链接：https://blog.csdn.net/Auyuer/article/details/73007525

版权

验证码专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                background:lightgoldenrodyellow;
            }
            .clear{
                clear:both;
            }
            #box{
                width:500px;
                height:500px;
                background:lightsalmon;
                margin:100px auto;

            }
            span,input{
                line-height: 60px;
                width:230px;
                height:60px;
                background:lightcyan;
                border:none;
                margin:85px 10px;
                float:left;
                text-align: center;
                color:#333;
                font-size: 26px;
                outline: none;
            }

            button{
                width:100px;
                height:50px;
                margin:auto;
                cursor: pointer;
                background:lightgray;
                border-radius: 7px;
            }
            button:hover{
                background:#AAA;
            }

            p{
                text-align: center;
                font-family: "微软雅黑";
            }
        </style>
    </head>
    <body>
        <script type="text/javascript">
            window.onload=function(){

                var oBox = document.getElementById("box");
                var oInput =document.getElementsByTagName("input")[0];
                var oSpan = document.getElementsByTagName("span")[0];
                var Obutton=document.getElementsByTagName("button")[0];
                //随机数的数组
                var arr = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "q", "w", "e", "r", "t", "y", "u", "i", "o", "p", "a", "s", "d", "f", "g", "h", "j", "k", "l", "z", "x", "c", "v", "b", "n", "m"];
                var len = arr.length;//数组的长度
                var str="";
                for(var i=0 ; i<6; i++){
                    var ran = Math.floor(Math.random()*len);
                    //Math.floor()向下取整，Math.random()获得一个0到1之间的随机数
                    //Math.random()*len便可以获得0到36之间的随机数，向下取整之后便可以保证得到0到35之间的随机整数
                    //而0到35代表数组里面的数组元素的下标
                    str+=arr[ran];
                    //str为六个随机数拼接而成
                }
                oSpan.innerHTML=str;
                //将str写入span中
                //当点击验证按钮时，进行一个简单的验证
                Obutton.onclick=function(){
                    if(oInput.value ==""){
                    //如果输入的字符为空，弹出提示框
                        alert("请输入验证码");
                        //用toUpperCase()将用户的输入和span中的随机数都转换成大写，保证用户的输入不区分大小写
                    }else if( oInput.value.toUpperCase() != oSpan.innerHTML.toUpperCase()){
                        alert("验证码输入错误");
                    }else {
                        alert("验证正确")
                    }
                }

            }

        </script>

        <div id="box">
            <input type="text">
            <span></span>
            <p class="clear">
                <button>点击验证</button>
            </p>
            <p>（不区分大小写）</p>
        </div>
    </body>
</html>