【知了堂学习笔记】_JavaScript之DOM操作案例（验证码）

来源：互联网发布：淘宝如何网购编辑：程序博客网时间：2024/06/06 18:38

请关注“知了堂学习社区”，地址：http://www.zhiliaotang.com/portal.php

刚刚学习了JS操作DOM，做了一个小小小小案例_验证码。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <style type="text/css">        div{            width: 300px;            margin: 100px auto;        }        .ipt{            width: 150px;            height: 30px;        }        #ma{            width: 70px;            height: 35px;            font-size: 22px;            text-align: center;            line-height: 30px;            display: inline-block;            border: 1px solid #ccc;            vertical-align: middle;        }        a{            color: black;            text-decoration: none;        }    </style>    <body>        <input type="text" placeholder="请输入图片中的验证码" class="ipt" onMouseOut="inputCode(this)" />        <a href="###" onclick="createCode()" class="huan"><span id="ma"></span>&nbsp;换一张</a>        <span class="pan" id="pan"></span>    </body>    <script>        window.onload = function(){            var code ;            createCode();        }        function createCode(){             code = "";// 创建4个数字验证码            var codeLength = 4; // 验证长度4            var checkCode = document.getElementById("ma");            var arraycode = new Array(0,1,2,3,4,5,6,7,8,9,            'a','b','c','d','e','f','g','h','i','j','k','m','l','n','o','p','q','r','s','t','o','v','w','x','y','z',            'A','B','C','D','E','F','G','H','I','J','K','M','L','N','O','P','Q','R','S','T','O','V','W','X','Y','Z')                for(var i = 0;i<codeLength;i++){                var randomCode = Math.floor(Math.random()*52);                code += arraycode[randomCode];            }            if(checkCode){                checkCode.innerHTML = code;            }        }        function inputCode(obj){            var pan = document.getElementById("pan");            var inputValues = obj.value;            console.log(inputValues)            if(inputValues.length<0){                pan.innerText = "is not null";                pan.style.color = "red";            }else if(inputValues.toUpperCase() != code.toUpperCase()){               pan.innerText = "is error";               pan.style.color = "red";            }else{                pan.innerText = "is right";                pan.style.color = "green";            }        }    </script></html>

阅读全文

0 0