H5+css3+js搭建带验证码的登录页面

来源：互联网发布：软件展示html模版编辑：程序博客网时间：2024/05/16 06:38
[html] view plain copy
<!DOCTYPE HTML>  
<html>  
    <head>  
        <title>EasyBuy后台管理系统</title>  
        <meta charset="utf-8">  
        <style>  
            .main_bar{  
                width:1350px;  
                height:350px;  
                background-color:#6495ED;  
                margin-top:10%;  
            }         
            #login_form{  
                width:40%;  
                height:100%;  
                background-color:#112435;  
                margin:0 auto;  
            }  
            .title{  
                width:100%;  
                height:55px;  
                color:#ffffff;  
                border-bottom:1px solid #ffffff;  
                font-size:20pt;  
                font-family:"微软雅黑";  
                line-height:55px;  
                text-align:center;                
            }  
            #form_widget{  
                width:100%;  
                height:295px;  
                background-color:#808080;  
            }  
            .txt{  
                display:block;/*设置为独立块（换行）*/  
                width:70%;  
                margin:0 auto;  
                height:35px;  
                font-size:15pt;  
                border-radius:5px;/*设置圆角样式*/  
                border:0;  
                padding-left:8px;  
            }  
            #vcode{  
                height:35px;  
                width:40%;  
                font-size:15pt;  
                margin-left:15%;  
                border-radius:5px;  
                border:0;  
                padding-left:8px;  
            }  
            #code{  
                color:#ffffff;/*字体颜色白色*/  
                background-color:#000000;     
                font-size:20pt;  
                font-family:"华康娃娃体W5";  
                padding:5px 35px 10px 35px;  
                margin-left:5%;       
                cursor:pointer;  
            }  
            #search_pass_link{  
                width:70%;  
                text-align:right;  
                margin:0 auto;  
                padding:5px;  
            }  
            /*层级选择器*/  
            #search_pass_link a{  
                color:#000000;  
                text-decoration:none;                 
            }  
            /*伪类*/  
            #search_pass_link a:hover{  
                color:#ff0000;  
                text-decoration:underline;  
            }  
            .btn{  
                width:70%;  
                margin-left:15%;  
                height:40px;  
                border:0;  
                font-size:14pt;  
                font-family;"微软雅黑";  
                background-color:#FC5628;  
                color:#ffffff;  
                cursor:pointer;/*设置指针鼠标的样式*/  
                border-radius:20px;/*设置圆角样式*/  
                border:0;  
            }     
            #copyright{  
                width:100%;  
                text-align:center;  
                padding-top:20px;  
                font-family:"微软雅黑";  
                color:#e0e0e0;  
            }  
        </style>  
    </head>  
    <body leftmargin="0" onload="changeImg()">  
        <div class="main_bar">   
            <div id="login_form">  
                <div class="title">  
                    EasyBuy系统登录                   
                </div>      
                <form action="main.html" onsubmit="return check()">  
                <div id="form_widget">  
                    <br>  
                    <input type="text" placeholder="请输入账号" id="box_name" class="txt" value="用户名" onfocus="this.value=''" onblur="if(this.value=='')this.value='用户名'"/>  
                    <br>  
                    <input type="password" placeholder="请输入密码" id="box_pass" class="txt" value="password" onfocus="this.value=''" onblur="if(this.value=='')this.value='password'"/>  
                    <br>  
                    <input type="text" id="vcode" placeholder="验证码" value="验证码" onfocus="this.value=''" onblur="if(this.value=='')this.value='验证码'"/><span id="code" title="看不清，换一张"></span>  
                    <div id="search_pass_link">  
                        <a href="#">忘记密码？</a>  
                    </div>                      
                    <input  type="submit" value="登录" class="btn" onmouseover="this.style.backgroundColor='#FF8D00'" onmouseout="this.style.backgroundColor='#FC5628'">  
                    <br>  
                    <div id="copyright">  
                        Power By WXH &copy;CopyRight 2016  
                    </div>  
                </div>  
                </form>  
            </div>  
        </div>      
    </body>     
    <script type="text/javascript">  
        var code;//声明一个变量用于存储生成的验证码  
        document.getElementById("code").onclick=changeImg;  
        function changeImg(){  
            //alert("换图片");  
            var arrays=new Array(  
                '1','2','3','4','5','6','7','8','9','0',  
                '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',  
                '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'               
            );  
            code='';//重新初始化验证码  
            //alert(arrays.length);  
            //随机从数组中获取四个元素组成验证码  
            for(var i=0;i<4;i++){  
            //随机获取一个数组的下标  
                var r=parseInt(Math.random()*arrays.length);  
                code+=arrays[r];  
                //alert(arrays[r]);  
            }  
            //alert(code);  
            document.getElementById('code').innerHTML=code;//将验证码写入指定区域  
        }         
          
        //效验验证码(表单被提交时触发)  
        function check(){  
            //获取用户输入的验证码  
            var input_code=document.getElementById('vcode').value;  
            //alert(input_code+"----"+code);  
            if(input_code.toLowerCase()==code.toLowerCase())  
            {  
                //验证码正确(表单提交)  
                return true;  
            }  
            alert("请输入正确的验证码!");  
            //验证码不正确,表单不允许提交  
            return false;  
        }  
    </script>   
</html>  
阅读全文
0 0