私が自由だったとき、私はZhihuのホームページに基づいてそれを書き、動的な背景、ログインと登録機能など、それをシミュレートするためにいくつかの情報を参照しました。
ここにログインするのは、Spring Securityを使用しています
登録はAjaxによって送信されます
特定のコードは非常に簡単です。データチェックなどを含む一目でわかります。
<％@ page Language = "Java" Import = "Java.util。*" PageEncoding = "UTF-8"％> <％@ taglib uri = "http://java.sun.com/jsp/jstl/core"プレフィックス= "c"％> <％string path = request.getextpath（）; string basepath = request.getscheme（）+"：//"+request.getServername（）+"："+request.getServerport（）+path+"/"; ％> < .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} .title {font-size：18pont-size; coldize; ＃707171; font-weight：bold; margin：30px auto;} .index-body {text-align：center;} .nav-sliders {position：relative; display：inline-bottom; margin-bottom：20px;} .nav-sliders> a {font-size：inline-block; wont-fammil yahei "; color：＃999; cursor：pointer; float：left; $ width} .nav-sliders> a.active {color：＃0f88eb;} .nav-sliders> span {position：absolute：height：2px; background：＃0f88eb; disply：5px; fidth：5px; .Stage {Apsoce：Absolute;左：0; Top：0; width：100％; height：100％; background：＃f7fafc;} .login-box {width：300px;} .wrap {border：1px solid＃d5d5d5; border-radius：5px; .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;変換：翻訳（25px、0）;トランジション;翻訳（25px、0）; - moz-transform：translate（25px、0）; ofacity：0; visibility：hisdor：cursor：text;} .wrap> div> label.move {transform：translate：翻訳（0,0）;遷移：すべて0.5s Ease-out; 1;可視性：可視;} .password {border-top：solid 1px＃d5d5d5;} .code {right：115px;} .name {right：5px;} .loginname {right：5px;} .loginpass {right：5px;} {right：5px;}。 .Pass {右：5px;} .passagain {right：5px;} .button {height：40px; background：＃0f88eb; text-align：center; line-height：40x; border-radius：5px; margin-top：25px; coler：#fff; .Remember {Text-Align：Left; Margin-Top：20px; font-family： "Microsoft yahei"; color：＃666666;} .Remember> a {float：right; cursor：pointer; color：＃666666;} .other {text-align：left; fead-top ＃666666;オーバーフロー：hidden;} .other> span {font-size：14px; float：float：left; margin-top：2px; cursor：pointer;} .other> div {float：left; transition：all 1s ease-in; -webkit-transition：すべて0.3s ease：0; -102：pert（-20xx（-20xx（-20pt）;翻訳（-18px）; - moz-transform：translatex（-18px）; visibility：hidhingibility：hidden;} .other> div> a {magne-left：20px; color：＃666666; font-size：15px;} .other> .hidden {transition：すべて1;変換：translatex（0）; - webkit-transform：transtex（0）; - moz-transform：transatex（0）; visibility：bisible;} .download {border：solid 1px＃0f88eb; yahei "; margin-top：50px; cursor：pointer; position：relative;} .download> .close {display：none;} .download .pic {display：none; position：absolute：#fff; botton：78px; width：310px; left：-10px; z-diddex：5; padding 0; padding 0; padding 0; padding 8px 0 rgba（0,0,0、.15）;} .registered-box {width：300px;表示：なし;} .text {font-size：14px; margin-top：20px; font-family： "microsoft yahei"; color：＃666666;} .text> a {color：＃0f88eb;} verification-code {wosed：aubsoft; right：14px; top：14px; font-family " yahei "; font-size：18px; cursor：pointer;} #register：hover {ofacity：0.7;} #login：hover {ofacity：0.7;} </style> </head> <body =" z-index：9999; posed：relative "> div div h1> <h1> </h2> </h2> </h2> </h2> </h2> <div> <a id = "loginbutton"> login </a> <a>レジスタ</a> <span> </span> </div> <div> <！ - login start-> <div> <form id = "loginform" action = "$ {pagecontext.request.request.contextpath}/j_spring_security_security_siveck"> < id="username" name='j_username' value="" placeholder="username"> <label>Please enter the login name (email address)</label> </div> <div> <input type="password" id="password" name='j_password' placeholder="password"> <label>Password</label> </div> </div> <div id="login">Login</div> <div> <label> <入力ID = "rememberme" name "name =" _ spring_security_remember_me "type =" checkbox "> remember：</label> <a>ログインできませんか？ = "javascript：volid（0）;"> wechat </a> <a href = "javascript：volid（0）;"> wechat </a> <a href = "javascript：volid（0）;"> wechat </a> <a href = a href = a href = "javascript：volid（volid（0）; style = "color：red"> $ {sessionscope.spring_security_last_exception.message} </span> </div> </div> <！ - login end-> <！ - レジスタスタート - > <> <div> <> <> <> <> <> < PlaceHolder = "ユーザー名（電子メール）"> <label> username </label> </div> <パスワード</label> </div> <div> <入力タイプ= "パスワード" id "pssworagain" name "name =" "value =" "placeholder ="再びパスワードを入力> <ラベル>再び入力してください。 id = "createcade"> </div> </div> </div> <div id = "register"> register </div> </form> </div> <！ - 登録の終了 - > </div> </div> </div> </div> <canvas id = "canvas" style = "z-dex：1000" 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 { return setimeout（p、1000/60）;}; h.caf = h.cancelanimationframe || webkitcancelanimationframe || function（p）{cleartimeout（p）;}; function.prototype.method = function（q、p）{return this.prototype [q] = p、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.beginp ath（）; 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.move（）; return;} if（this.timer ++ = = =} {this.move（）;} if（return;} this._moveframes）{this.setmove（）;}}） rue; this._frames = math.random（）*100+120; this._frame = 0; this._tx = this.ox+math.random（）*100-50; this._ty = this.o y+math.random（）*100-50;}） his._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.y、u = math.sqrt（q*q+p*p）、t = s.radius; return u> t？0：（1-u/t）*0.6;}）。メソッド（ "ease"、function（q、p、s、r）{if（q/= r/2）<1） -s/2*（（ - q）*（q-2）-1）+p;}）。method（ "_ムーブフレーム"、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; 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（）;}関数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.p.client; ddeventListener（ "resize"、function（）{caf（b）; a = []; f = g.getBoundingClientRect（）; g.width = c = f.width; g.height = l = f.height; m（）;}、false）; m（）;}） </script> <script> var code; //グローバル検証コード$（function（）{jcpublic.register（）; jcpublic.tab（）; jcpublic.login（）;/ * jcpublic.download（）; */jcpublic.createcode（）; jcpublic.clickcode（）; $（ "。wrap> div> input"） $（this）.Parent（）。 var jcpublic = {register：function（）{// register var currentthis = this; // current object $（ "＃register"）。on（ "click"、function（）{var $ this = $（this）; var name = $（ "＃name"）。 $（ "＃pssworagain"）。 || name "null"）{"。wrap"）。（ "。name"） address "） passwordagain == null）{$ this.prev（ "。wrap"）。find（ "。passagain"）。addclass（ "move"）; falseを返します。 } else if（passworagain == "" || passwordagain == "undefined" || passwordagain == null）{$ this.prev（ "。wrap"）。 falseを返します。 } else if（passworagain！= password）{$ this.prev（ "。wrap"）。find（ "。passagain"）。html（ "入力したパスワードが一貫していることを確認してください"）。 falseを返します。 } else if（code！== code）{$ this.prev（ "。wrap"）。find（ "。code"）。html（ "検証コードは間違っている"）。 currentthis.createCode（）; //検証コードを更新して再入力} else} else {//ユーザーアプリケーションを送信して$ .ajax（{type： "post"、url： "registeruser.do"、data：{"name"：name、 "password"：passwor}、dataType： "json：errer：fultions（xmltpust、アラート（ "+xmlhttprequest.status+、"+function（msg.messagestring）; }）; /* $（ "＃Registerform"）。ajaxSubmit（function（message）{alert（message.messagestring）;}）; */}}）; }、tab：function（）{//登録とlogin $（ "。nav-sliders> a"） $（this）.index（）; // index $（ "。on"）。 }）; }、login：function（）{$（ "＃login"）。 （username.length == 0）{//同時に$ this.prev（ "。wrap"）。 $ this.prev（ "。loginname"） ==「||」 }、ダウンロード：function（）{$（ "。ダウンロード"）。on（ "click"、function（）{$（this）。 }、createcode：function（）{//検証コードvar selectchar = new Array（0、1、2、3、4、5、6、7、8、 9、 'A'、 'b'、 'c' '' '、' e '、' f '、' g '' '、h'、 ''、j '、' k '、' l '、' m '、' o '、' p '、' Q、 'r'、 's'、 't'、 'u'） code = ""; var codelength = 4; //（var i = 0; i <codelength; i ++）{var index = math.floor（math.random（）*selectchar.length）; // random code+= selectchar [index]; //$("#createcade").html(code）} return $（ "＃createcade"）。html（code）; }、ClickCode：function（）{// Switchefification code var $ this = this; $（ "＃createcade"）。 }}; </script> </body> </html>上記は、編集者が紹介したZhihuホームページを模倣したJava Web開発の完全なコードです。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！