Quando eu estava livre, escrevi -o com base na página inicial de Zhihu e me referi a algumas informações para simulá -lo, incluindo antecedentes dinâmicos, além de funções de login e registro.
Faça login aqui está usando a segurança da primavera
As inscrições são enviadas pelo Ajax
O código específico é muito simples, você pode dizer de uma olhada que inclui verificações de dados, etc.
<%@ Page Language = "java" import = "java.util. String basalepath = request.getScheme ()+": //"+request.getServername ()+":"+request.getServerport ()+path+"/"; %> <! Docttype html> <html> <head> <meta charset = "utf-8"> <titter> </title> <script src = "jquery/jQuery.js"> </script> <yoy> body {padding: 0; margin: 0; Background: #f7ff; .Index-box {Width: 300px; Hight: Auto; margem: 0 Auto; margem-top: 40px;} .logo {Background: url (imagens/cabeçalho/headernew4.png) no-reimpeat; #707171; peso da fonte: BOLD; margem: 30px Auto;} .Index-Body {Text-align: Center;} .Nav-Sliders {Position: Relity; Display: Block Inline; Margin-Bottom: 20px;} .Nav-Sliders> A {Font-Size 20Px: "Microsoft yahei"; cor: #999; cursor: ponteiro; flutuação: esquerda; $ width} .nav-sliders> A.Active {cor: #0f88EB;} .nav-sliders> span {position: absoluto; altura: 2px; fundo: #0f88eb; LUMP; LEDEFT: LIMPO: LENTE {LEFT 5P: 2Px; . estágio {posição: absoluto; esquerda: 0; topo: 0; largura: 100%; altura: 100%; fundo: #f7fafc;}. Login-box {width: 300px;} .wrap {borda: 1px sólido #d5d5d5; border-radius: 5px; #fff;}. .wrap> div> entrada {largura: 95%; borda: nenhum; preenchimento: 17px 2,5%; radio de borda: 5px;} .Wrap> div> LABEL.Error {Position: Absolute; cor: #c33; top: 0; Traduzir (25px, 0);-MOZ-TRANSFORM: Traduzir (25px, 0); opacidade: 0; visibilidade: Hidden; Cursor: text;} .Wrap> Div> Label.Move {Transform: Translate (0,0); Transição: todos 0.5s Ease-Out; -Webkit-Trransform: Translate (0,0); Visibilidade: visível;} .Password {Border-top: sólido 1px #d5d5d5;} .code {direita: 115px;} .Name {direita: 5px;} .LoginName {direita: 5px;} .LogInpass {Right: 5px;}. .Passagain {direita: 5px;} .button {altura: 40px; fundo: #0f88eb; text-align: Center; altura da linha: 40px; Radio de borda: 5px; margin-top: 25px; color: #ff; font-family: "MicroSting yahei"; 20px; Font-Family: "Microsoft yahei"; cor: #666666;} .Membert> a {float: direita; cursor: ponteiro; cor: #666666;} .ote {text-align: esquerd; margin-top: 20px; .Other> span {Size da fonte: 14px; float: esquerda; margem-top: 2px; cursor: ponteiro;} .ote> div {float: esquerda; transição: todos os 1s facilidade-in; -webkit-transição: todos 0.3s ease-in; Tradratex (-18px);-MOZ-transform: translatex (-18px); visibilidade: hidden;} .ote> div> a {margin-left: 20px; cor: #666666; Size-size: 15px;} .Other>. facilidade-in; opacidade: 1; transformada: translatex (0);-webkit-transform: translatex (0);-moz-transform: translatex (0); visibilidade: visível;} .Download {borda: border-radius #0f88eb; altura: 40px; line-hight: 40px; borda; Yahei "; margin-top: 50px; cursor: ponteiro; posição: relativa;} .Download> .close {display: nenhum;} .Download .pic {display: nenhum; posição: absoluto; fundo: #fff; inferior: 78px; largura: 310px; esquerda: -10PX; Z-Index: 5; 5; 8px 0 rgba (0,0,0, .15);} .Registered-box {Width: 300px; Exibir: Nenhum;} .Text {Size da fonte: 14px; margin-top: 20px; Font-Family: "Microsoft yahei"; cor: #666666;} .Text> a {cor: #0f88eb;}. Yahei "; font-size: 18px; cursor: ponteiro;} #Register: hover {opacity: 0.7;} #Login: hover {opacity: 0.7;} </style> </fience> <dody> <div estilo =" z-index: 999; posição: relativa "> <div> <H1> <div> <a id = "loginbutton"> login </a> <a> Registre </a> <span> </span> </div> <div> <!-login start-> <div> <form id = "loginform" action = "$ {pageContext.request.ContextPath}/j_spring_spring_spring_spring_s. type = "email" id = "nome de usuário" nome = 'j_username' value = "" placeholder = "nome de usuário"> <brety> Por favor, digite o nome de login (endereço de email) </cret> </div> <div> <input type = "senha" id = "senha" name = 'j_password' planilha = "senha"> <bel> senha </senha "</senha" </senha "</senha" </senha "</senha" </senha "</senha" "senha" ". id = "login"> login </div> <div> <belt> <input id = "lembreme" name = "_ spring_security_remember_me" type = "caixa de seleção"> lembre -se de mim: </celt> <a> Não é possível fazer login? = "JavaScript: Volid (0);"> qq </a> <a href = "javascript: volid (0);"> weChat </a> <a href = "javascript: volid (0);"> wechat </a> <a href = "javascript: volid (0); = "JavaScript: Volid (0);"> weChat </a> </div> </div> <div> <span style = "cor: vermelho"> $ {sessionscope.spring_security_last_exception.message} </span> </div </div <!-"Idin end-> <!- action = "RegisterUser.do"> <div> <div> <input type = "email" name = "name" value = "" id = "name" placeholder = "nome de usuário (email)"> <brety> digite o nome de usuário </cret> </div> <!-<! <div> <input type = "senha" id = "passwor" name = "passwor" value = "" placeholder = "senha"> <breting> Por favor, digite sua senha </celt> </div> <div> <input type = "senha" id = "PSSWORAGAIN" name = "" Value = "" PlaceHolder = "Enter senha" <> <> <teck] <bel = "Please", por favor, você senha que você senha "<bay" <t = ", por favor, digit) </div> <brater tyster tyster) <bump tyster tyster tyster) </tipstert) </div> <brat) </divpt) </belt> </div> <brat) </belt> </div> <brat) </div) </etc. id = "code" name = "" maxLength = "6" value = "" Parholder = "Código de verificação"> <breting> Por favor, digite o código de verificação </elabel> <div id = "createCade"> </div> </div> </div> <Div ID = "Register"> Register </div> </form> <//!-end de registro- id = "canvas" style = "z-index: 1000"> </lvas> <cript> "use rigoroso"; (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/L/ 2, raio: 180}, k = 40, e = 60, a = [], b; g.width = c; g.Height = l; h.raf = h.requestanimationframe || webkitRequestanimationframe || função (p) { retornar setTimeout (p, 1000/60);}; h.caf = h.cancelanimationframe || webkitcancelanimationframe || function (p) {cleartimeout (p);}; function.prototype.method = function (q) {return this.protype [q] 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", função (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 (); {u = v [s [q]]; p.beginPath (); p.moveto (this.x, this.y); this._moveframes) {this.setMove ();}}). Método ("setMove", function () {this._ismove = t 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;}). Método ("move", function () {this.x = this.ease (this._frame ++, this.x, this._tx-this.x, t 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;}}). Método ("getalpha", função (s) {var q = this.xs.x, p = this.ys.y, u = math.sqrt (q*q+p*p), t = s.radius; retorna u> t? 0: (1-u/t)*0,6;}) -s/2*((-q)*(q-2) -1)+p;}). Método ("_ moveframes", e); função 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; para (; 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 ();} função o () {n.clearRect (0,0, c, l); A.ForEach (função (r, q, p) {r.draw (n, p, j);}); b = raf (o);} g.AdDeventListener ("mouseMove", função (p) {jx = p.cientx-f.left; ddeventListener ("redimensionar", function () {caf (b); a = []; f = g.getBoundingClientRect (); g.width = c = f.width; g.Height = l = f.Height; m ();}, false););); </script> <cript> var code; // define um código de verificação global $ (function () {jcpublic.register (); jcpublic.tab (); jcpublic.login ();/ * jcpublic.download (); */jcpodic.createcode (); $ (". WRAP> DIV> entrada"). Focus (function () {$ (this) .css ({"esboço": "nenhum"}); var $ this = $ (this); $ this.next ("Label"). $ (this) .parent (). crianças ("div"). ToggleClass ("Hidden"); var jcpublic = {Register: function () {// Registrar var currentthis = this; // objeto atual $ ("#registro"). $ ("#pssworagain"). val (); || Nome == "NULL") {$ this.prev (". endereço "). addclass (" move "); retorna false;} else if (passwor ==" "|| senha ==" indefinido "|| senha == null) {$ this.prev (". wrap "). find (". senhagain == null) {$ this.prev (". wrap"). find (". Passagain"). addclass ("move"); retornar falso; } else if (passworAgain == "" || senhagain == "indefinido" || senhagain == null) {$ this.prev (". wrap"). find (". Passagain"). addclass ("move"); retornar falso; } else if (passworAgain! = senha) {$ this.prev (". wrap"). find (". Passagain"). html ("verifique se a senha inserida é consistente"). addclass ("move"); retornar falso; } else if (code! == code) {$ this.prev (". wrap"). find (". code"). html ("código de verificação está incorreto"). addclass ("move"); return currentThis.createCode();//Refresh the verification code and re-enter }else{ //Send the user application to add $.ajax({ type : "POST", url : "registerUser.do", data : {"name":name,"password":passwor}, dataType: "json", error: function(XMLHttpRequest, textStatus, errorThrown){ alerta (Erro: "XMLHTTPrequest.status+" ,,, "+textstatus); }}); /* $ ("#RegisterForm"). AjaxsubMit (function (message) {alert (message.messageString);}); */}}); }, Guia: function () {// alterna o registro e login $ (". Nav-sliders> A"). (isto) .index (); // Índice $ (". }); }, login: function () {$ ("#login").). (Nome de usuário.Length == 0)) {// não ao mesmo tempo $ this.prev (". $ this.Prev (WRAP ") == " }, download: function () {$ (". Download"). on ("clique", function () {$ (this) .children (". pic"). Toggle (300);}); }, createCode: function () {// Código de verificação var selectchar = new Matriz (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n' n ',' o ',' p. code = ""; var codeLength = 4; // o comprimento do código de verificação para (var i = 0; i <codElength; i ++) {var index = math.floor (math.random ()*selectchar.length); // código aleatório+= select [index]; //$("#createcade").html(code)} retornar $ ("#createCade"). html (código); }, clickcode: function () {// Código de verificação da chave var $ this = this; $ ("#createCade"). on ("clique", function () {return $ this.createCode ();}); }}; </script> </body> </html>O exposto acima é o código completo de desenvolvimento da Web Java, imitando a página inicial do Zhihu introduzida pelo editor. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!