JavaWeb开发之模仿知乎首页完整代码
闲来无事，就根据知乎的首页，参考了一些资料模拟写了下，包含了动态的背景，以及登录和注册功能
登录这里使用的是springsecurity
注册是ajax发送的
具体代码很简单，一看就知道，包含了数据的检查等
<%@pagelanguage="java"import="java.util.*"pageEncoding="utf-8"%>
<%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%>
<%
Stringpath=request.getContextPath();
StringbasePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<scriptsrc="jquery/jquery.js"></script>
<style>
body{padding:0;margin:0;background:#F7FAFC;}
a{text-decoration:none;}
.index-box{width:300px;height:auto;margin:0auto;margin-top:40px;}
.logo{background:url(images/header/headerNew4.png)no-repeat;;width:350px;height:100px;margin:0auto}
.title{font-size:18px;text-align:center;color:#707171;font-weight:bold;margin:30pxauto;}
.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:1pxsolid#d5d5d5;border-radius:5px;background:#fff;}
.wrap>div{position:relative;overflow:hidden;}
.wrap>div>input{width:95%;border:none;padding:17px2.5%;border-radius:5px;}
.wrap>div>label.error{position:absolute;color:#c33;top:0;line-height:50px;transform:translate(25px,0);transition:all0.5sease-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:all0.5sease-out;-webkit-transform:translate(0,0);-moz-transform:translate(0,0);opacity:1;visibility:visible;}
.password{border-top:solid1px#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:all1sease-in;-webkit-transition:all0.3sease-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:all1sease-in;display:block;-webkit-transition:all0.3sease-in;opacity:1;transform:translateX(0);-webkit-transform:translateX(0);-moz-transform:translateX(0);visibility:visible;}
.download{border:solid1px#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:40px0;border-radius:8px;box-shadow:008px0rgba(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>
<divclass="index-box"style="z-index:9999;position:relative">
<divclass="index-header">
<h1class="logo"></h1>
<h2class="title">Speed4C开发平台</h2>
</div>
<divclass="index-body">
<divclass="nav-sliders">
<aid="loginButton"class="loginactive">登录</a>
<aclass="registered">注册</a>
<spanclass="on"></span>
</div>
<divclass="change">
<!--登录开始-->
<divclass="login-box">
<formid="loginForm"action="${pageContext.request.contextPath}/j_spring_security_check"method="post">
<divclass="wrap">
<divclass="phone">
<inputtype="email"id="username"name='j_username'value=""placeholder="用户名">
<labelclass="errorloginName">请输入登录名（email地址）</label>
</div>
<divclass="password">
<inputtype="password"id="password"name='j_password'placeholder="密码">
<labelclass="errorloginPass">密码</label>
</div>
</div>
<divclass="button"id="login">登录</div>
<divclass="remember">
<label><inputid="rememberMe"name="_spring_security_remember_me"type="checkbox">记住我:</label>
<a>无法登陆?</a>
</div>
</form>
<divclass="other">
<span>社交账号登录</span>
<divclass="other-login">
<ahref="javascript:volid(0);">扣扣</a>
<ahref="javascript:volid(0);">微信</a>
<ahref="javascript:volid(0);">微博</a>
</div>
</div>
<divclass="other">
<spanstyle="color:red">${sessionScope.SPRING_SECURITY_LAST_EXCEPTION.message}</span>
</div>
</div>
<!--登录结束-->
<!--注册开始-->
<divclass="registered-box">
<formid="registerForm"method="post"action="registerUser.do">
<divclass="wrap">
<divclass="phone">
<inputtype="email"name="name"value=""id="name"placeholder="用户名（邮箱）">
<labelclass="errorname">请输入用户名</label>
</div>
<!--<divclass="password">
<inputtype="text"id="phone"value=""placeholder="手机号">
<labelclass="errorphonerestet">请输入手机号</label>
</div>-->
<divclass="password">
<inputtype="password"id="passwor"name="passwor"value=""placeholder="密码">
<labelclass="errorpass">请输入密码</label>
</div>
<divclass="password">
<inputtype="password"id="pssworAgain"name=""value=""placeholder="再次输入密码">
<labelclass="errorpassagain">请再次输入密码</label>
</div>
<divclass="password">
<inputtype="text"id="code"name=""maxlength="6"value=""placeholder="验证码">
<labelclass="errorpassworcode">请输入验证码</label>
<divclass="verification-code"id="createCade"></div>
</div>
</div>
<divclass="button"id="register">注册</div>
</form>
</div>
<!--注册结束-->
</div>
</div>
</div>
<canvasid="canvas"class="stage"style="z-index:1000"></canvas>
<script>
"usestrict";(function(h,d){varg=typeofd==="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){returnsetTimeout(p,1000/60);};h.caf=h.cancelAnimationFrame||webkitCancelAnimationFrame||function(p){clearTimeout(p);};Function.prototype.method=function(q,p){returnthis.prototype[q]=p,this;};functioni(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){vars=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){varq=this.x-s.x,p=this.y-s.y,u=Math.sqrt(q*q+p*p),t=s.radius;returnu>t?0:(1-u/t)*0.6;}).method("ease",function(q,p,s,r){if((q/=r/2)<1){returns/2*q*q+p;}return-s/2*((--q)*(q-2)-1)+p;}).method("_moveFrames",e);functionm(){varq=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=newi(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();}functiono(){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>
varcode;//定义一个全局验证码
$(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");
});
});
varjcPublic={
register:function(){//注册
varcurrentThis=this;//当前对象
$("#register").on("click",function(){
var$this=$(this);
varname=$("#name").val();//姓名
varregisterName=document.getElementById("name");
varpasswor=$("#passwor").val();
varpassworAgain=$("#pssworAgain").val();
varCode=$("#code").val();//验证码
if(name.length==0&&passwor.length==0){//同时为空
$this.prev(".wrap").find("label").addClass("move");
returnfalse;
}elseif(name==""||name=="undefined"||name=="null"){
$this.prev(".wrap").find(".name").html("请输入用户名").addClass("move");
returnfalse;
}elseif(!registerName.checkValidity()){
$this.prev(".wrap").find(".name").html("请输入有效的email地址").addClass("move");
returnfalse;
}elseif(passwor==""||passwor=="undefined"||passwor==null){
$this.prev(".wrap").find(".pass").addClass("move");
returnfalse;
}elseif(passworAgain==""||passworAgain=="undefined"||passworAgain==null){
$this.prev(".wrap").find(".passagain").addClass("move");
returnfalse;
}elseif(passworAgain==""||passworAgain=="undefined"||passworAgain==null){
$this.prev(".wrap").find(".passagain").addClass("move");
returnfalse;
}elseif(passworAgain!=passwor){
$this.prev(".wrap").find(".passagain").html("请确保输入的密码一致").addClass("move");
returnfalse;
}elseif(code!==Code){
$this.prev(".wrap").find(".code").html("验证码有误").addClass("move");
returncurrentThis.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);
varusername=$("#username").val();
varpassword=$("#password").val();
varcheckloginName=document.getElementById("username");
if((password.length==0)&&(username.length==0)){//同时为空
$this.prev(".wrap").find("label").addClass("move");
returnfalse;
}elseif(username==""||username=="undefined"||username==null){
$this.prev(".wrap").find(".loginName").addClass("move");
returnfalse;
}elseif(!checkloginName.checkValidity()){
$this.prev(".wrap").find(".loginName").html("请输入有效的email地址").addClass("move");
returnfalse;
}elseif(password==""||password=="undefined"||password==null){
$this.prev(".wrap").find(".loginPass").addClass("move");
returnfalse;
}else{
//全部通过再提交
$("#loginForm").submit();
}
});
},
downLoad:function(){
$(".download").on("click",function(){
$(this).children(".pic").toggle(300);
});
},
createCode:function(){//验证码
varselectChar=newArray(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="";
varcodeLength=4;//验证码的长度
for(vari=0;i<codeLength;i++){
varindex=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开发之模仿知乎首页完整代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！