2021 1 15 准备完成健民老师的寒假“指导” 进度1

家庭记账本web开发：

用了之前没怎么用过的css以及完善了之后的Javastrip，我的速度真慢T_T，

登录界面：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>家庭记账本</title>
        <style type="text/css">/*设置CSS样式*/
        input[type=text]{
            color: #0099FF;
            width: 200px;
            height: 20px;
            outline-color:aliceblue;
        }
        input[type=password]{
            color: #0099FF;
            width: 200px;
            height: 20px;
            
        }
        body{
            background-image: url(image/u=2811972558,2224783843&fm=26&gp=0.jpg);
            background-size: 100vw 100vh;
        }
        div{
            background-color:white;
            width: 300px;
            top:100px;
            left: 200px;
        }
    </style>
    </head>
    <script>/*给标签绑定函数验证表单*/        
        window.onload=function(){
            var name=document.getElementById("name")
            var setbtn=document.getElementById("setbtn")
            var form=document.getElementById("loginform")
            setbtn.onclick=function(){
                form.action="setuser.html"
                form.method="get"
                form.submit()
            }
            var loginbtn=document.getElementById("loginbtn")
            loginbtn.onclick=function(){
                form.action="Aservlet?method=login"
                form.submit()
            }
        }
    </script>
    <body>
    <div id="div1">
        <h2 align="center"><font size="5" color="skyblue">家庭记账本账号注册系统</font></h2>
        <form action="Aservlet" method="post" id="loginform">
                <center>账号<input type="text" id="name" name="name" align="right"/><span id="YN"></span><br><br>
                        密码<input type="password" id="pass" name="password" align="center"/><span id="YP"></span><br>
                        <input type="button" id="loginbtn" value="登录" align="center" name="login"/>
                        <input type="button" id="setbtn" value="注册" align="center" name="set"/>
                </center>
        </form>
    </div>
    </body>
</html>

注册界面：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>家庭记账本</title>
 6         <style type="text/css">
 7         input[type=text]{
 8             color: #0099FF;
 9             width: 200px;
10             height: 20px;
11             outline-color:aliceblue;
12         }
13         input[type=password]{
14             color: #0099FF;
15             width: 200px;
16             height: 20px;
17             
18             
19         }
20         body{
21             background-image: url(image/u=2811972558,2224783843&fm=26&gp=0.jpg);
22             background-size: 100vw 100vh;
23         }
24         div{
25             background-color:white;
26             width: 300px;
27             /*position: absolute;
28             top:100px;
29             left: 200px;*/
30         }
31         
32     </style>
33     </head>
34     <script>        
35         window.onload=function(){
36             var name=document.getElementById("name")
37             var pass=document.getElementById("pass")
38             var pass2=document.getElementById("pass2")
39             var setbtn=document.getElementById("setbtn")
40             var form=document.getElementById("loginform")
41             name.onblur=function(){
42                 if(name.value.length>10||name.value.length<3)
43                 {
44                     var span=document.getElementById("YN")
45                     span.innerHTML="账号长度请保持在【3~10】！"
46                 }else{
47                     var span=document.getElementById("YN")
48                     span.innerHTML=""
49                 }
50             }
51             pass.onblur=function(){
52                 if(pass.value.length!=6)
53                 {
54                     var span=document.getElementById("YP")
55                     span.innerHTML="密码长度为6位！"
56                     if(pass.value==pass2.value){
57                         var span=document.getElementById("YP2")
58                         span.innerHTML=""
59                     }
60                 }else{
61                     var span=document.getElementById("YP")
62                     span.innerHTML=""
63                 }
64             }
65             pass2.onblur=function(){
66                 if(pass.value!=pass2.value)
67                 {
68                     var span=document.getElementById("YP2")
69                     span.innerHTML="前后密码不一致！"
70                 }else{
71                     var span=document.getElementById("YP2")
72                     span.innerHTML=""
73                 }
74             }
75             setbtn.onclick=function(){
76                 form.action="Aservlet?method=set"
77                 var a=document.getElementById("YP").value==undefined&&document.getElementById("YP2").value==undefined&&document.getElementById("YN").value==undefined
78                 if(a){
79                     form.submit()    
80                 }else{
81                     alert("注册失败，表单有误！")
82                 }
83             }
84         }
85     </script>
86     <body>
87         <div id="div1">
88         <h2 align="center"><font size="5" color="skyblue">家庭记账本账号注册系统</font></h2>
89         <form action="Aservlet" method="post" id="loginform">
90                 <center>
91                         账号<input type="text" id="name" name="name" align="right"/><br><span id="YN"></span><br>
92                         密码<input type="password" id="pass" name="password" align="center"/><br><span id="YP"></span><br>
93                         确认密码<input type="password" id="pass2" name="password" align="center"/><br><span id="YP2"></span><br><br>
94                         <input type="button" id="setbtn" value="注册" align="center" name="set"/>
95                 </center>
96         </form>
97         </div>
98     </body>
99 </html>