9.15

发布时间 2023-09-15 21:07:21作者: 灬倾夏
javaweb登录界面,js生成随机验证码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #center{
            width: 16%;
            margin: 0 auto;
        }
        #checkcode{
            background-color: rgb(201, 208, 212);
            color: blue;
            font-size: 30px;
        }
        #renew{
            color: blue;
            text-decoration:underline;
            cursor:pointer;
        }
    </style>
</head>
<body>
    <div id="center">
        <h1 style="text-align: center">用户登录</h1>
        <form action="" method="post">
            账号:<input type="text" name="name"><br><br>
            密码:<input type="password" name="password"><br><br>
            验证码:<input type="text" id="inputcode"><br><br>
            <span id="checkcode">123456</span>
            <a id="renew">看不清,换一张</a><br><br>
            <button id="check">确定</button>
            <input type="reset" value="重置">
            <script>
                //加载时生成验证码
                window.onload=function(){//打开网页,立刻执行函数
                    var res=getcode();
                    function getcode(){
                        var str='';
                        for(var i=0;i<6;i++){
                            var num=Math.round(Math.random()*9);
                            str +=num;
                        }
                        return str;
                    }
                    document.getElementById('checkcode').innerText=res;
                    //点击生成验证码
                    document.getElementById('renew').onclick=function(){
                        document.getElementById('checkcode').innerText=getcode();
                    }
                    //点击确定检验验证码
                    document.getElementById('check').onclick=function(){
                        var code=document.getElementById('checkcode').innerText;
                        var inputcode=document.getElementById('inputcode').value;
                        if(code != inputcode){
                            window.alert("您输入的验证码不正确");
                            document.getElementById('inputcode').value=''
                            document.getElementById('checkcode').innerText=getcode();
                            return false;
                        }
                    }
                }
            </script>
        </form>
    </div>
   
</body>
</html>