JavaWeb開(kāi)發(fā)之模仿知乎首頁(yè)完整代碼
更新時(shí)間：2016年11月11日 10:43:54 作者：web小菜鳥(niǎo)ing
這篇文章主要介紹了JavaWeb開(kāi)發(fā)之模仿知乎首頁(yè)完整代碼的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
閑來(lái)無(wú)事，就根據(jù)知乎的首頁(yè)，參考了一些資料模擬寫(xiě)了下，包含了動(dòng)態(tài)的背景，以及登錄和注冊(cè)功能
登錄這里使用的是spring security
注冊(cè)是ajax發(fā)送的
具體代碼很簡(jiǎn)單，一看就知道，包含了數(shù)據(jù)的檢查等
<%@ 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開(kāi)發(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">
<!--登錄開(kāi)始-->
<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="用戶(hù)名">
<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è)開(kāi)始-->
<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="用戶(hù)名（郵箱）">
<label class="error name">請(qǐng)輸入用戶(hù)名</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)輸入用戶(hù)名").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ā)送添加用戶(hù)申請(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開(kāi)發(fā)之模仿知乎首頁(yè)完整代碼，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
- JavaWeb利用struts實(shí)現(xiàn)文件下載時(shí)改變文件名稱(chēng)
- JavaWeb文件下載功能實(shí)例代碼
- JavaWeb實(shí)現(xiàn)文件上傳下載功能實(shí)例詳解
- JavaWeb實(shí)現(xiàn)同一帳號(hào)同一時(shí)間只能一個(gè)地點(diǎn)登陸（類(lèi)似QQ登錄的功能）
- JavaWeb 簡(jiǎn)單分頁(yè)實(shí)現(xiàn)代碼
- JavaWeb中的簡(jiǎn)單分頁(yè)完整代碼(推薦)
- javaWeb使用Kaptcha組件生成驗(yàn)證碼
- Javaweb實(shí)現(xiàn)上傳下載文件的多種方法
- JavaWeb登陸功能實(shí)現(xiàn)代碼
- javaweb 實(shí)現(xiàn)文件下載的方法及實(shí)例代碼
相關(guān)文章
使用SpringMVC在redirect重定向的時(shí)候攜帶參數(shù)的問(wèn)題
這篇文章主要介紹了使用SpringMVC在redirect重定向的時(shí)候攜帶參數(shù)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03![Java 類(lèi)型相互轉(zhuǎn)換byte[]類(lèi)型，Blob類(lèi)型詳細(xì)介紹](http://img.jbzj.com/images/xgimg/bcimg1.png)
Java 類(lèi)型相互轉(zhuǎn)換byte[]類(lèi)型，Blob類(lèi)型詳細(xì)介紹
這篇文章主要介紹了Java 類(lèi)型相互轉(zhuǎn)換byte[]類(lèi)型，Blob類(lèi)型的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要為大家詳細(xì)介紹了Java?Redis配置Redisson的相關(guān)資料，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)或工作有一定參考價(jià)值，感興趣的可以了解一下2022-08-08
探究springboot中的TomcatMetricsBinder
springboot的TomcatMetricsBinder主要是接收ApplicationStartedEvent然后創(chuàng)建TomcatMetrics執(zhí)行bindTo進(jìn)行注冊(cè),TomcatMetrics主要注冊(cè)了globalRequest、servlet、cache、threadPool、session相關(guān)的指標(biāo),本文給大家介紹的非常詳細(xì),需要的朋友參考下吧2023-11-11
Java 仿天貓服裝商城系統(tǒng)的實(shí)現(xiàn)流程
讀萬(wàn)卷書(shū)不如行萬(wàn)里路，只學(xué)書(shū)上的理論是遠(yuǎn)遠(yuǎn)不夠的，只有在實(shí)戰(zhàn)中才能獲得能力的提升，本篇文章手把手帶你用java+SSM+jsp+mysql+maven實(shí)現(xiàn)一個(gè)仿天貓服裝商城系統(tǒng),大家可以在過(guò)程中查缺補(bǔ)漏，提升水平2021-11-11
這篇文章主要為大家詳細(xì)介紹了java學(xué)習(xí)筆記之馬踏棋盤(pán)算法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
Java日常練習(xí)題,每天進(jìn)步一點(diǎn)點(diǎn)(43)
下面小編就為大家?guī)?lái)一篇Java基礎(chǔ)的幾道練習(xí)題(分享)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧，希望可以幫到你2021-07-07
Java C++題解leetcode 1684統(tǒng)計(jì)一致字符串的數(shù)目示例
這篇文章主要為大家介紹了Java C++題解leetcode 1684統(tǒng)計(jì)一致字符串的數(shù)目示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
使用filebeat收集并解析springboot日志過(guò)程示例
這篇文章主要為大家介紹了使用filebeat收集并解析springboot日志實(shí)現(xiàn)過(guò)程示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08
Java 讀取網(wǎng)絡(luò)圖片存儲(chǔ)到本地并生成縮略圖
用Java做開(kāi)發(fā)經(jīng)常需要處理圖片。本文就來(lái)看一下如何保存圖片到本地并生成縮略圖2021-05-05