閒來無事，就根據知乎的首頁，參考了一些資料模擬寫了下，包含了動態的背景，以及登錄和註冊功能
登錄這裡使用的是spring security
註冊是ajax發送的
具體代碼很簡單，一看就知道，包含了數據的檢查等
<%@ 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 style="z-index:9999;position:relative"> <div> <h1></h1> <h2>Speed4C開發平台</h2> </div> <div> <div> <a id="loginButton">登錄</a> <a>註冊</a> <span></span> </div> <div> <!--登錄開始--> <div> <form id="loginForm" action="${pageContext.request.contextPath}/j_spring_security_check" method="post"> <div> <div> <input type="email" id="username" name='j_username' value="" placeholder="用戶名"> <label>請輸入登錄名（email地址）</label> </div> <div> <input type="password" id="password" name='j_password' placeholder="密碼"> <label>密碼</label> </div> </div> <div id="login">登錄</div> <div> <label><input id="rememberMe" name="_spring_security_remember_me" type="checkbox">記住我:</label> <a>無法登陸?</a> </div> </form> <div> <span>社交賬號登錄</span> <div> <a href ="javascript:volid(0);">扣扣</a> <a href ="javascript:volid(0);">微信</a> <a href ="javascript:volid(0);">微博</a> </div> </div> <div> <span style="color:red">${sessionScope.SPRING_SECURITY_LAST_EXCEPTION.message}</span> </div> </div> <!--登錄結束--> <!--註冊開始--> <div> <form id="registerForm" method="post" action="registerUser.do"> <div> <div> <input type="email" name="name" value="" id="name" placeholder="用戶名（郵箱）"> <label>請輸入用戶名</label> </div> <!-- <div> <input type="text" id="phone" value="" placeholder="手機號"> <label>請輸入手機號</label> </div> --> <div> <input type="password" id="passwor" name="passwor" value="" placeholder="密碼"> <label >請輸入密碼</label> </div> <div> <input type="password" id="pssworAgain" name="" value="" placeholder="再次輸入密碼"> <label>請再次輸入密碼</label> </div> <div> <input type="text" id="code" name="" maxlength="6" value="" placeholder="驗證碼"> <label>請輸入驗證碼</label> <div id="createCade"></div> </div> </div> <div id="register">註冊</div> </form> </div> <!--註冊結束--> </div> </div> </div> <canvas id="canvas" 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(ux,uy);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.xs.x,p=this.ys.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,pv,pv-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){jx=p.clientX-f.left;jy=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;//定義一個全局驗證碼$(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(){//註冊var currentThis = this;//當前對象$("#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();//驗證碼if(name.length==0 && passwor.length==0){//同時為空$this.prev(".wrap").find("label").addClass("move"); return false; }else if(name == "" || name == "undefined" || name == "null"){ $this.prev(".wrap").find(".name").html("請輸入用戶名").addClass("move"); return false; }else if(!registerName.checkValidity()){ $this.prev(".wrap").find(".name").html("請輸入有效的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("請確保輸入的密碼一致").addClass("move"); return false; }else if(code !== Code ){ $this.prev(".wrap").find(".code").html("驗證碼有誤").addClass("move"); return currentThis.createCode();//驗證碼輸入有誤就刷新驗證碼重新輸入}else{ //發送添加用戶申請$.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 == "註冊成功"){ $("#loginButton").click(); $("#registerForm")[0].reset(); } } }); /* $("#registerForm").ajaxSubmit(function(message){ alert(message.messageString); }); */ } }); }, Tab:function(){//切換註冊和登錄$(".nav-sliders>a").on("click",function(){ $(this).addClass("active").siblings().removeClass("active"); var $width = $(this).width();//當前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)){//同時為空$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("請輸入有效的email地址").addClass("move"); return false; }else if(password == "" || password == "undefined" || password == null ){ $this.prev(".wrap").find(".loginPass").addClass("move"); return false; }else{ //全部通過再提交$("#loginForm").submit(); } }); }, downLoad:function(){ $(".download").on("click",function(){ $(this).children(".pic").toggle(300); }); }, createCode:function(){//驗證碼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');//所有候選組成驗證碼的字符，也可以用中文的code=""; var codeLength=4;//驗證碼的長度for(var i =0;i<codeLength;i++){ var index = Math.floor(Math.random()*selectChar.length);//隨機數code +=selectChar[index]; //$("#createCade").html(code) } return $("#createCade").html(code); }, clickCode:function(){//切換驗證碼var $this = this; $("#createCade").on("click",function(){ return $this.createCode(); }); } }; </script> </body> </html>以上所述是小編給大家介紹的JavaWeb開發之模仿知乎首頁完整代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！