1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <script type="text/javascript" src="js/jquery-1.12.4.js" ></script>
7 </head>
8 <body>
9 <div id="sy" align="center">
10 <button id="jrcz">注册</button>
11 <button id="jrdl">登录</button>
12 </div>
13
14 <!--注册页面-->
15 <div id="zcym" style="display: none;">
16 请输入用户名：<input id="zcyhm" /><br />
17 请输入密码：<input id="zcmm1" type="password" /><br />
18 请确认密码：<input id="zcmm2" type="password" /><br />
19 输入验证码:<input id="yzm1"/>
20 <button id="hqyzm1">获取验证码</button><br />
21 <button id="zc">注册</button>
22 <button id="fhsy1">返回首页</button>
23 </div>
24
25 <!--登录页面-->
26 <div id="dlym" style="display: none;">
27 请输入用户名：<input id="yhm" /><br />
28 请输入密码：<input id="mm" type="password" /><br />
29 输入验证码:<input id="yzm2"/>
30 <button id="hqyzm2">获取验证码</button><br />
31 <button id="dl">登录</button>
32 <button id="fhsy2">返回首页</button>
33 </div>
34
35 <!--登陆成功页面-->
36 <div id="dlcgym" style="display: none;">
37 <font>欢迎你,</font>
38 <span id="hyn"></span><br />
39 <button id="ckxx">查看用户信息</button><br />
40 <span id="ckyhm"></span><br />
41 <span id="ckmm"></span><br />
42 <button id="xgmm">修改密码</button><br />
43 <button id="fhsy3">返回首页</button>
44 </div>
45
46 <!--修改密码页面-->
47 <div id="xgmmym" style="display: none;">
48 请输入原密码：<input id="ymm" /><br />
49 请输入新密码：<input id="xmm" /><br />
50 <button id="tjxmm">提交</button>
51 <button id="fh">返回</button>
52 </div>
53
54 <script>
55 var t=""
56 var q=""
57 var arr1=["zhangsan","wangwu"]
58 var arr2=["123123","111111"]
59
60 $("#jrcz").click(function(){
61 $("#zcym").show()
62 $("#sy").hide()
63 })
64 $("#jrdl").click(function(){
65 $("#dlym").show()
66 $("#sy").hide()
67 })
68 $("#fhsy1").click(function(){
69 $("#zcym").hide()
70 $("#sy").show()
71 })
72 $("#fhsy2").click(function(){
73 $("#dlym").hide()
74 $("#sy").show()
75 })
76 $("#fhsy3").click(function(){
77 $("#dlcgym").hide()
78 $("#sy").show()
79 })
80
81
82
83 //注册页面
84 $("#hqyzm1").click(function(){
85 var zcpd=false
86 var zcyhm=$("#zcyhm").val()
87 var zcmm1=$("#zcmm1").val()
88 var zcmm2=$("#zcmm2").val()
89
90 for(var i=0;i<arr1.length;i++){
91 if(zcyhm==arr1[i]){
92 alert("用户名已存在")
93 return
94 }else{
95 zcpd=true
96 }
97 }
98
99 if(zcyhm.length<6||zcyhm.length>15){
100 alert("用户名格式不对")
101 return
102 }else{
103 zcpd=true
104 }
105
106 if(zcmm1.length<6||zcmm1.length>15){
107 alert("密码格式不对")
108 return
109 }else{
110 zcpd=true
111 }
112
113 if(zcmm1!=zcmm2){
114 alert("两次密码不同")
115 return
116 }else{
117 zcpd=true
118 }
119
120 if(zcpd==true){
121 for(var i=0;i<4;i++){
122 t=t+Math.floor(Math.random()*10);
123 }
124 console.log(t)
125 }
126 })
127
128 $("#zc").click(function(){
129 var yzm1=$("#yzm1").val()
130 var zcyhm=$("#zcyhm").val()
131 var zcmm1=$("#zcmm1").val()
132 if(yzm1==t){
133 alert("注册成功")
134 arr1.push(zcyhm)
135 arr2.push(zcmm1)
136 }else{
137 alert("验证码不正确")
138 }
139 })
140
141 // 登录页面
142 $("#hqyzm2").click(function(){
143 for(var i=0;i<4;i++){
144 q=q+Math.floor(Math.random()*10);
145 }
146 console.log(q)
147 })
148
149 $("#dl").click(function(){
150 var yhm=$("#yhm").val()
151 var mm=$("#mm").val()
152 var yzm=$("#yzm2").val()
153
154 for(var i=0;i<arr1.length;i++){
155 if(yhm==arr1[i]){
156 break
157 }
158 }
159 if(mm==arr2[i] && yzm==q){
160 alert("登陆成功")
161 $("#dlcgym").show()
162 $("#dlym").hide()
163 $("#hyn").html(yhm)
164 }else{
165 alert("登录失败")
166 }
167 })
168
169 //登陆成功页面
170 $("#ckxx").click(function(){
171 $("#ckyhm").html(arr1)
172 $("#ckmm").html(arr2)
173 })
174
175 $("#xgmm").click(function(){
176 $("#dlcgym").hide()
177 $("#xgmmym").show()
178 })
179
180 // 修改密码页面
181 $("#tjxmm").click(function(){
182 var ymm=$("#ymm").val()
183 var xmm=$("#xmm").val()
184 var hyn=$("#hyn").html()
185 for(var i=0;i<arr1.length;i++){
186 if(arr1[i]==hyn){
187 break
188 }
189 }
190 if(ymm==arr2[i]){
191 arr2[i]=xmm
192 alert("修改成功")
193 }else{
194 alert("原密码错误")
195 }
196 })
197
198 $("#fh").click(function(){
199 $("#dlcgym").show()
200 $("#xgmmym").hide()
201 })
202
203 </script>
204 </body>
205 </html>
浙公网安备 33010602011771号