閑來(lái)無(wú)事，就根據(jù)知乎的首頁(yè)，參考了一些資料模擬寫了下，包含了動(dòng)態(tài)的背景，以及登錄和注冊(cè)功能
登錄這里使用的是spring security
注冊(cè)是ajax發(fā)送的
具體代碼很簡(jiǎn)單，一看就知道，包含了數(shù)據(jù)的檢查等
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
|
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery/jquery.js"></script> <style> body{padding: 0;margin: 0;background: #F7FAFC;} a{text-decoration: none;} .index-box{width:300px;height: auto;margin:0 auto;margin-top: 40px;} .logo{background:url(images/header/headerNew4.png) no-repeat;;width: 350px;height: 100px;margin:0 auto} .title{font-size: 18px;text-align: center;color: #707171;font-weight: bold;margin: 30px auto;} .index-body{text-align: center;} .nav-sliders{position: relative;display: inline-block;margin-bottom: 20px;} .nav-sliders>a{font-size: 20px;display: inline-block;width:60px ;font-family: "微軟雅黑";color: #999;cursor: pointer;float: left;$width} .nav-sliders>a.active{color: #0f88eb;} .nav-sliders>span{position: absolute;height: 2px;background:#0f88eb;display:block;left: 5px;width: 50px;bottom:-8px;} .stage{position:absolute;left:0;top:0;width:100%;height:100%;background:#F7FAFC;} .login-box{width: 300px;} .wrap{border:1px solid #d5d5d5;border-radius: 5px;background: #fff;} .wrap>div{position: relative;overflow: hidden;} .wrap>div>input{width: 95%;border:none;padding:17px 2.5%;border-radius: 5px;} .wrap>div>label.error{position: absolute;color: #c33;top: 0;line-height: 50px;transform: translate(25px,0);transition: all 0.5s ease-out;-webkit-transform: translate(25px,0);-moz-transform: translate(25px,0);opacity: 0;visibility:hidden;cursor: text;} .wrap>div>label.move{transform: translate(0,0);transition: all 0.5s ease-out;-webkit-transform: translate(0,0);-moz-transform: translate(0,0);opacity: 1;visibility: visible;} .password{border-top: solid 1px #d5d5d5 ;} .code{right:115px ;} .name{right:5px ;} .loginName{right:5px ;} .loginPass{right:5px ;} .pass{right:5px ;} .passagain{right:5px ;} .button{height: 40px;background:#0f88eb;text-align: center;line-height: 40px;border-radius: 5px;margin-top: 25px;color: #fff;font-family: "微軟雅黑";cursor: pointer;} .remember{text-align: left;margin-top: 20px;font-family: "微軟雅黑";color: #666666;} .remember>a{float:right;cursor: pointer;color: #666666;} .other{text-align: left;margin-top: 20px;font-family: "微軟雅黑";color: #666666;overflow: hidden;} .other>span{font-size: 14px;float: left;margin-top: 2px;cursor: pointer;} .other>div{float: left; transition: all 1s ease-in;-webkit-transition: all 0.3s ease-in;opacity: 0;transform: translateX(-20px);-webkit-transform: translateX(-18px);-moz-transform: translateX(-18px);visibility: hidden;} .other>div>a{margin-left: 20px;color: #666666;font-size: 15px;} .other>.hidden{ transition: all 1s ease-in;display: block;-webkit-transition: all 0.3s ease-in;opacity: 1;transform: translateX(0);-webkit-transform: translateX(0);-moz-transform: translateX(0);visibility: visible;} .download{border:solid 1px #0f88eb;height: 40px;line-height: 40px;border-radius: 5px;color:#0f88eb ;font-family: "微軟雅黑";margin-top: 50px;cursor: pointer;position: relative;} .download>.close{display: none;} .download .pic{display:none;position: absolute;background: #fff;bottom: 78px;width: 310px;left: -10px;z-index: 5;padding: 40px 0;border-radius: 8px;box-shadow: 0 0 8px 0 rgba(0,0,0,.15);} .registered-box{width: 300px; display: none;} .text{font-size: 14px;margin-top: 20px;font-family: "微軟雅黑";color: #666666;} .text>a{color: #0f88eb;} .verification-code{position: absolute;right:22px;top: 14px;font-family: "微軟雅黑";font-size: 18px;cursor: pointer;} #register:hover{opacity: 0.7;} #login:hover{opacity: 0.7;} </style> </head> <body> <div class="index-box" style="z-index:9999;position:relative"> <div class="index-header"> <h1 class="logo"></h1> <h2 class="title">Speed4C開發(fā)平臺(tái)</h2> </div> <div class="index-body"> <div class="nav-sliders"> <a id="loginButton" class="login active">登錄</a> <a class="registered">注冊(cè)</a> <span class="on"></span> </div> <div class="change"> <!--登錄開始--> <div class="login-box"> <form id="loginForm" action="${pageContext.request.contextPath}/j_spring_security_check" method="post"> <div class="wrap"> <div class="phone"> <input type="email" id="username" name='j_username' value="" placeholder="用戶名"> <label class="error loginName">請(qǐng)輸入登錄名（email地址）</label> </div> <div class="password"> <input type="password" id="password" name='j_password' placeholder="密碼"> <label class="error loginPass">密碼</label> </div> </div> <div class="button" id="login">登錄</div> <div class="remember"> <label><input id="rememberMe" name="_spring_security_remember_me" type="checkbox">記住我:</label> <a>無(wú)法登陸?</a> </div> </form> <div class="other"> <span>社交賬號(hào)登錄</span> <div class="other-login"> <a href ="javascript:volid(0);">扣扣</a> <a href ="javascript:volid(0);">微信</a> <a href ="javascript:volid(0);">微博</a> </div> </div> <div class="other"> <span style="color:red">${sessionScope.SPRING_SECURITY_LAST_EXCEPTION.message}</span> </div> </div> <!--登錄結(jié)束--> <!--注冊(cè)開始--> <div class="registered-box"> <form id="registerForm" method="post" action="registerUser.do"> <div class="wrap"> <div class="phone"> <input type="email" name="name" value="" id="name" placeholder="用戶名（郵箱）"> <label class="error name">請(qǐng)輸入用戶名</label> </div> <!-- <div class="password"> <input type="text" id="phone" value="" placeholder="手機(jī)號(hào)"> <label class="error phone restet">請(qǐng)輸入手機(jī)號(hào)</label> </div> --> <div class="password"> <input type="password" id="passwor" name="passwor" value="" placeholder="密碼"> <label class="error pass" >請(qǐng)輸入密碼</label> </div> <div class="password"> <input type="password" id="pssworAgain" name="" value="" placeholder="再次輸入密碼"> <label class="error passagain">請(qǐng)?jiān)俅屋斎朊艽a</label> </div> <div class="password"> <input type="text" id="code" name="" maxlength="6" value="" placeholder="驗(yàn)證碼"> <label class="error passwor code">請(qǐng)輸入驗(yàn)證碼</label> <div class="verification-code" id="createCade"></div> </div> </div> <div class="button" id="register">注冊(cè)</div> </form> </div> <!--注冊(cè)結(jié)束--> </div> </div> </div> <canvas id="canvas" class="stage" style="z-index:1000"></canvas> <script> "use strict";(function(h,d){var g=typeof d==="string"?document.querySelector(d):d,f=g.getBoundingClientRect(),c=f.width,l=f.height,n=g.getContext("2d"),j={x:c/2,y:l/2,radius:180},k=40,e=60,a=[],b;g.width=c;g.height=l;h.raf=h.requestAnimationFrame||webkitRequestAnimationFrame||function(p){return setTimeout(p,1000/60);};h.caf=h.cancelAnimationFrame||webkitCancelAnimationFrame||function(p){clearTimeout(p);};Function.prototype.method=function(q,p){return this.prototype[q]=p,this;};function i(p,r,q){this.x=this.ox=p;this.y=this.oy=r;this.radius=Math.random()*1+2;this.timer=q|0;}i.method("draw",function(p,v,r){var s=this.closest,q,u,t=this.getAlpha(r);if(t>0){p.fillStyle=p.strokeStyle="rgba(156,217,249,"+t+")";p.beginPath();p.arc(this.x,this.y,this.radius,0,Math.PI*2,true);p.closePath();p.fill();if(s){q=s.length;while(q--){u=v[s[q]];p.beginPath();p.moveTo(this.x,this.y);p.lineTo(u.x,u.y);p.stroke();}}}if(this._isMove){this.move();return;}if(this.timer++===this._moveFrames){this.setMove();}}).method("setMove",function(){this._isMove=true;this._frames=Math.random()*100+120;this._frame=0;this._tx=this.ox+Math.random()*100-50;this._ty=this.oy+Math.random()*100-50;}).method("move",function(){this.x=this.ease(this._frame++,this.x,this._tx-this.x,this._frames);this.y=this.ease(this._frame,this.y,this._ty-this.y,this._frames);if(Math.abs(this.x-this._tx)<0.5&&Math.abs(this.y-this._ty)<0.5){this._isMove=false;this.timer=0;}}).method("getAlpha",function(s){var q=this.x-s.x,p=this.y-s.y,u=Math.sqrt(q*q+p*p),t=s.radius;return u>t?0:(1-u/t)*0.6;}).method("ease",function(q,p,s,r){if((q/=r/2)<1){return s/2*q*q+p;}return -s/2*((--q)*(q-2)-1)+p;}).method("_moveFrames",e);function m(){var q=Math.max(60,c*1.5/k),t=l*1.5/q+0.5|0,v,r=0,s,u,p;v=c/q+0.5|0;for(;r<t;r++){for(s=0;s<v;s++){u=new i(s*q+(Math.random()*q*2-q),r*q+(Math.random()*q*2-q),Math.random()*e);p=r*v+s;a[p]=u;if(r&1&&s&&1){u.closest=[p-1,p-v,p-v-1];s<v-1&&u.closest.push(p+1);r<t-1&&u.closest.push(p+v);}}}o();}function o(){n.clearRect(0,0,c,l);a.forEach(function(r,q,p){r.draw(n,p,j);});b=raf(o);}g.addEventListener("mousemove",function(p){j.x=p.clientX-f.left;j.y=p.clientY-f.top;},false);h.addEventListener("resize",function(){caf(b);a=[];f=g.getBoundingClientRect();g.width=c=f.width;g.height=l=f.height;m();},false);m();})(this,document.querySelector(".stage")); </script> <script> var code;//定義一個(gè)全局驗(yàn)證碼 $(function(){ jcPublic.register(); jcPublic.Tab(); jcPublic.login(); /* jcPublic.downLoad(); */ jcPublic.createCode(); jcPublic.clickCode(); $(".wrap>div>input").focus(function(){ $(this).css({"outline": "none" }); var $this = $(this); $this.next("label").removeClass("move");//隱藏提示信息 }); $(".other>span").on("click",function(){ $(this).parent().children("div").toggleClass("hidden"); }); }); var jcPublic = { register:function(){//注冊(cè) var currentThis = this;//當(dāng)前對(duì)象 $("#register").on("click",function(){ var $this = $(this); var name = $("#name").val();//姓名 var registerName = document.getElementById("name"); var passwor = $("#passwor").val(); var passworAgain = $("#pssworAgain").val(); var Code = $("#code").val();//驗(yàn)證碼 if(name.length==0 && passwor.length==0){//同時(shí)為空 $this.prev(".wrap").find("label").addClass("move"); return false; }else if(name == "" || name == "undefined" || name == "null"){ $this.prev(".wrap").find(".name").html("請(qǐng)輸入用戶名").addClass("move"); return false; }else if(!registerName.checkValidity()){ $this.prev(".wrap").find(".name").html("請(qǐng)輸入有效的email地址").addClass("move"); return false; }else if(passwor == "" || passwor == "undefined" || passwor == null ){ $this.prev(".wrap").find(".pass").addClass("move"); return false; }else if(passworAgain == "" || passworAgain == "undefined" || passworAgain == null ){ $this.prev(".wrap").find(".passagain").addClass("move"); return false; }else if(passworAgain == "" || passworAgain == "undefined" || passworAgain == null ){ $this.prev(".wrap").find(".passagain").addClass("move"); return false; }else if(passworAgain != passwor){ $this.prev(".wrap").find(".passagain").html("請(qǐng)確保輸入的密碼一致").addClass("move"); return false; }else if(code !== Code ){ $this.prev(".wrap").find(".code").html("驗(yàn)證碼有誤").addClass("move"); return currentThis.createCode();//驗(yàn)證碼輸入有誤就刷新驗(yàn)證碼重新輸入 }else{ //發(fā)送添加用戶申請(qǐng) $.ajax({ type : "POST", url : "registerUser.do", data : {"name":name,"password":passwor}, dataType: "json", error: function(XMLHttpRequest, textStatus, errorThrown){ alert("Error:"+XMLHttpRequest.status+",,,"+textStatus); }, success : function(msg) { alert(msg.messageString); if(msg.messageString == "注冊(cè)成功"){ $("#loginButton").click(); $("#registerForm")[0].reset(); } } }); /* $("#registerForm").ajaxSubmit(function(message){ alert(message.messageString); }); */} }); }, Tab:function(){//切換注冊(cè)和登錄 $(".nav-sliders>a").on("click",function(){ $(this).addClass("active").siblings().removeClass("active"); var $width = $(this).width();//當(dāng)前a的寬度 var $index = $(this).index();//索引 $(".on").stop(true,true).animate({"left":$width*$index+5+"px"},300); $(this).parents(".index-body").children(".change").children().eq($index).stop(true,false).show().siblings().hide(); }); }, login:function(){ $("#login").on("click",function(){ var $this = $(this); var username = $("#username").val(); var password = $("#password").val(); var checkloginName = document.getElementById("username"); if((password.length==0) && (username.length==0)){//同時(shí)為空 $this.prev(".wrap").find("label").addClass("move"); return false; }else if(username == "" || username == "undefined" || username == null ){ $this.prev(".wrap").find(".loginName").addClass("move"); return false; }else if(!checkloginName.checkValidity()){ $this.prev(".wrap").find(".loginName").html("請(qǐng)輸入有效的email地址").addClass("move"); return false; }else if(password == "" || password == "undefined" || password == null ){ $this.prev(".wrap").find(".loginPass").addClass("move"); return false; }else{ //全部通過(guò)再提交 $("#loginForm").submit(); } }); }, downLoad:function(){ $(".download").on("click",function(){ $(this).children(".pic").toggle(300); }); }, createCode:function(){//驗(yàn)證碼 var selectChar = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9,'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');//所有候選組成驗(yàn)證碼的字符，也可以用中文的 code=""; var codeLength=4;//驗(yàn)證碼的長(zhǎng)度 for(var i =0;i<codeLength;i++){ var index = Math.floor(Math.random()*selectChar.length);//隨機(jī)數(shù) code +=selectChar[index]; //$("#createCade").html(code) } return $("#createCade").html(code); }, clickCode:function(){//切換驗(yàn)證碼 var $this = this; $("#createCade").on("click",function(){ return $this.createCode(); }); } }; </script> </body> </html> |
以上所述是小編給大家介紹的JavaWeb開發(fā)之模仿知乎首頁(yè)完整代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)服務(wù)器之家網(wǎng)站的支持！
原文鏈接：http://blog.csdn.net/wuhawang/article/details/53125898
