美文网首页
demo 验证码

demo 验证码

作者: AnnQi | 来源:发表于2017-10-20 17:44 被阅读0次
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                *{
                    margin: 0;
                    padding: 0;
                }
                #box{
                    width: 100px;
                    height: 52px;
                    border: 1px solid red;
                    font-size: 26px;
                    line-height: 52px;
                    text-align: center;
                }
            </style>
        </head>
        <body>
            <div id="box"></div>
            <input type="text" id="txt" />
            <button id="btn">看不清,更换一张</button>
            <button id="qq">确定</button>
        </body>
        <script type="text/javascript">
            
            var btn = document.getElementById("btn");
            var qq = document.getElementById("qq");         
            var str;
            
            function yzm(){
                str = "";
                var box = document.getElementById("box");
                var arr = [0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","X","Y","Z",'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
                for(var i=0;i<4;i++){
                    var num = parseInt(Math.random(arr)*52);
                    str += arr[num];    
                }
                box.innerHTML = str;
            }       
            yzm();
            
            function qd(){
                var txt = document.getElementById("txt");
                if(txt.value.length<=0){
                    alert("请输入验证码");
                }else if(txt.value.toUpperCase()!= str.toUpperCase()){
                    alert("验证码输入有误");
                    yzm();
                }else{
                    alert("验证成功");
                }
            }
            
            
            btn.onclick = function(){
                yzm();
            }
            qq.onclick = function(){
                qd();
            }
            
            
        </script>
    </html>
    

    相关文章

      网友评论

          本文标题:demo 验证码

          本文链接:https://www.haomeiwen.com/subject/pnivuxtx.html