Quand j'étais libre, je l'ai écrit sur la base de la page d'accueil de Zhihu et j'ai fait référence à certaines informations pour les simuler, y compris l'arrière-plan dynamique, ainsi que les fonctions de connexion et d'enregistrement.
Connectez-vous ici utilise Spring Security
L'inscription est envoyée par Ajax
Le code spécifique est très simple, vous pouvez dire en un coup d'œil qui comprend des vérifications de données, etc.
<% @ Page Language = "Java" import = "java.util. *" Pageencoding = "utf-8"%> <% @ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c"%> <% String Path = request.getConTpath (); String basepath = request.getscheme () + ": //" + request.getServerName () + ":" + request.getServerport () + path + "/"; %> <! Doctype html> <html> <éadf> <meta charset = "utf-8"> <title> </ title> <script src = "jQuery / jQuery.js"> </ script> <style> body {padding: 0; margin: 0; background: # f7fafc;} a {text-decoration: nother;} .Index-box {width: 300px; hauteur: auto; marge: 0 auto; marge-top: 40px;} .logo {background: url (images / height / headhernew4.png) sans repat ;; width: 350px; # 707171; FONT-WEIGHT: Bold; marge: 30px auto;} .Index-body {Text-Align: Center;} .nav-sliders {position: relatif; affichage: bloc en ligne; margin-bottom: 20px;} .nav-sliders> A {Font-taille: 20px; affichage: inline-block; largement; "Microsoft Yahei"; couleur: # 999; curseur: pointeur; float: gauche; $ width} .nav-sliders> a.active {couleur: # 0f88eb;} .nav-sliders> span {position: absolu; hauteur: 2px; arrière .stage {position: absolue; gauche: 0; en haut: 0; largeur: 100%; hauteur: 100%; arrière-plan: # f7fafc;} .login-box {width: 300px;} .wrap {border: 1px solide # d5d5d5; border-radius: 5px; arrière-plan: #ffff;}. .Wrap> div> entrée {largeur: 95%; bordure: aucun; padding: 17px 2,5%; border-radius: 5px;} .wrap> div> étiquette.Error {position: absolue; couleur: # c33; top: 0; ligne de la ligne de facilité: 50px; transform: translate (25px, 0); transition: toutes les 0,5 traduire (25px, 0); - moz-transform: tradlate (25px, 0); opacité: 0; visibilité: caché; curseur: text;} .wrap> div> label.move {transform: transform (0,0); transition: all 0.5s facilite-out; -webkit-transform: tradlate: 1; Visible;} .Password {border-top: solide 1px # d5d5d5;} .code {right: 115px;} .name {right: 5px;} .loginname {droit: 5px;} .loginpass {droit: 5px;} .pass {droit: 5px;} .pass {droite: 5px;}. .Passagain {droite: 5px;} .button {hauteur: 40px; arrière-plan: # 0f88eb; Text-Align: Center; Line-Height: 40px; Border-Radius: 5px; margin-top: 25px; Color: #fff; Font-Family: "Microsoft Yahei"; Currsor: Poiner;} .remember {Text-aligne gauche; marge-top: 20px; font-famille: "Microsoft Yahei"; couleur: # 666666;} .remember> a {float: droite; curseur: pointeur; couleur: # 666666;}. # 666666; Overflow: Hidden;} .Ather> Span {Font-Size: 14px; float: Left; margin-top: 2px; curseur: pointeur;} .other> div {float: Left; transition: tout 1 Translatex (-18px); - Moz-Transform: Translatex (-18px); visibilité: caché;} .other> div> a {margin-left: 20px; Color: # 666666; Font-size: 15px;} .other> .hidden {transition: all 1s facilite in; 1; transform: tradlatex (0); - webkit-transform: tradatex (0); - moz-transform: tradlatex (0); visibilité: visible;} .Download {border: solide 1px # 0f88eb; height: 40px; line-height: 40px; fronde-radius: 5px; color: # 0f88eb; font-family: "MicroSof Yahei "; marge: 50px; curseur: pointeur; position: relative;} .Download> .close {affiche: aucun;} .Download .Pic {affichage: Aucun; position: absolu; arrière-plan: #fff; index: 78px; width: 310px; gauche: -10px; z-index: 5; padding: 40px 0; front-radius: 8px; z-index: padding: 40px 0; front-radius: 8Px; 0 0 8px 0 rgba (0,0,0, .15);} .gister-box {width: 300px; Affichage: Aucun;} .Text {Font-Size: 14px; margin-top: 20px; font-family: "Microsoft Yahei"; Color: # 66666;} .Text> Absolute; Yahei "; Font-Size: 18px; curseur: pointeur;} #Register: Hover {Opacity: 0.7;} #login: Hover {Opacity: 0.7;} </ style> </ad> <body> <div style =" Z-index: 9999; Position: Relative "> <v> <h1> </h1> <h> Speed4c Development Plateforme </h23> </h1> </div> <div> <a id = "LoginButton"> Login </a> <a> Enregistrez </a> <span> </span> </div> <div> <! - Login start -> <div> <form Id = "LoginForm" Action = "$ {pagecontex type = "e-mail" id = "username" name = 'j_username' value = "" placeholder = "username"> <label> Veuillez saisir le nom de connexion (adresse e-mail) </ labor id = "Login"> Login </ div> <div> <bable> <input id = "reliedme" name = "_ printemps_security_remember_me" type = "Checkbox"> Remember Me: </ Label> <a> Impossible de se connecter? </a> </div> </ Form> <v> <pan> Le compte social Login </span> <v> <a href = "javascript: volid (0);"> qq </a> <a href = "javascript: volid (0);"> wechat </a> <a href = "javascript: volid (0);"> wechat </a> <a href = "javascrip: volud (0);> wechat </a> = "JavaScript: Volid (0);"> weChat </a> </div> </div> <div> <span style = "Color: Red"> $ {Sessionscope.Spring_Security_Last_Exception.Message} </ Span> </ Div> </ Div> <! - Login End -> <! - Enregistrer START -> <v> <form ID = "REGISTOR Action = "registreUser.do"> <div> <v> <input type = "e-mail" name = "name" value = "" id = "name" placeholder = "nom d'utilisateur (e-mail)"> <babline> Veuillez saisir le nom d'utilisateur </ label> </ div> <! - <div> <entrée type = "text" id = "phone" value = "" lisholder = "mobile"> <label> <input type = "mot de passe" id = "passwor" name = "passwor" value = "" placeholder = "mot de passe"> <label> Veuillez saisir votre mot de passe </vabe> </v> <v> <entrée type = "mot de passe" id = "pssworagain" name = "" value = "" linholder = "Entrée à nouveau de mot de passe"> <label> Veuillez saisir votre mot de passe </ label> </v> </ div> <v> MaxLengthreau = "6" Value = "" placeholder = "Verification Code"> <Belle> Veuillez saisir le code de vérification </ Label> <div id = "CreateCade"> </ Div> </ Div> </ Div> <div Id = "Register"> Registre </v> </form> </div> <! - Fin de l'enregistrement -> </ Div> </div> </v> </v> </v> </v> </v> </v> style = "z-index: 1000"> </ canvas> <cript> "Utiliser strict"; (fonction (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, rayon: 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 = fonction (q, p) {return this.prototype [q] = p, this;}; fonction; fonction 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", fonction (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._ismove) {this.move (); return;} if (this.timer ++ === this._moveFrames) {this.setmove ();}}). Méthode ("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éthode ("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 . 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;}). Méthode ("faciliter", fonction (q, p, s, r) {if ((q / = r / 2) <1) {return s / 2 * q * p; -s / 2 * ((- q) * (q-2) -1) + p;}). Méthode ("_ moveframes", e); fonction 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 & s & s & s & s & s & s & s & s & s & s & s & s & s & s & s & s & s & s & s & s & S & S & nd 1) {U.Closest = [P-1, PV, PV-1]; S <V-1 && U.CloseSest.push (P + 1); R <t-1 && u.closest.push (p + v);}}} o ();} fonction o () {n.clearrect (0,0, c, l); a.ForEach (function (r, q, p) {r.draw (n, p, j);}); b = raf (o);} g.addeventListener ("MouseMove" ddeventListener ("redimensi", function () {caf (b); a = []; f = g.getBoundingClientRect (); g.width = c = f.width; g.height = l = f.height; m ();}, false); m ();}) (this, document.queryselector (".. </cript> <cript> code var; // définir un code de vérification global $ (function () {jcpublic.register (); jcpublic.tab (); jcpublic.login (); / * jcpublic.download (); * / jcpublic.createCode (); jcPublic.Clickcode (); $ (". wrap> div> input"). focus (function () {$ (this) .css ({"ssembere": "Aucun"}); var $ this = $ (this); $ this.next ("étiquette"). reposoveclass ("move"); // cachent des informations invites}); $ (this) .parent (). Enfants ("div"). Toggleclass ("Hidden");}); var jcpublic = {registre: function () {// registre var currentThis = this; // objet actuel $ ("# registre"). sur ("cliquez", fonction () {var $ this = $ (this); var name = $ ("# name"). val (); // name var regrinsname = document.getElementyid ("name"); var password = $ ("# passwork").). $ ("# pssworagain"). Val (); name == "null") {$ this.prev (". wrap"). find (". name"). html ("s'il vous plaît entrez un nom d'utilisateur"). AddClass ("Move"); Adresse "). addClass (" move "); return false;} else if (passworn ==" "|| password ==" Undefined "|| password == null) {$ this.prev (". wrap "). find (". pass "). addClass (" move "); return false;} else if (passworagain ==" "|| landgainAgain ==" undfind "|| PasswordAgain == null) {$ this.prev (". wrap"). find (". passagain"). addClass ("move"); retourne false; } else if (passworagain == "" || passwordAgain == "Undefined" || mot de passe de mot de passe == null) {$ this.prev (". wrap"). find (". passagain"). addClass ("Move"); retourne false; } else if (passworagain! = mot de passe) {$ this.prev (". wrap"). find (". passagain"). html ("Veuillez vous assurer que le mot de passe entré est cohérent"). AddClass ("Move"); retourne false; } else if (code! == code) {$ this.prev (". wrap"). find (". code"). html ("code de vérification est incorrect"). addClass ("move"); return currentThis.CreateCode (); // Rafraîchissez le code de vérification et rentrez} else {// Envoyez l'application utilisateur pour ajouter $ .ajax ({type: "Post", URL: "registerUser.do", data: {"name": nom, "mot de passe": passwor alerte (erreur: "+ xmlhttprequest.status +" ,,, "+ textStatus); }); / * $ ("# registreform"). ajaxSUBMit (fonction (message) {alert (message.messageString);}); * /}}); }, Tab: function () {// commutateur Enregistrement et connexion $ (". Nav-sliders> a"). Sur ("cliquez", fonction () {$ (this) .addclass ("actif"). Silets (). $ (this) .index (); // index $ (". sur"). stop (true, true) .animate ({"Left": $ width * $ index + 5 + "px"}, 300); $ (this) .parents (". index-body"). }); }, connexion: function () {$ ("# connexion"). sur ("cliquez", fonction () {var $ this = $ (this); var userName = $ ("# username"). Val (); var mot de passe = $ ("# mot de passe"). (username.Length == 0)) {// non en même temps $. $ this.prev (". Enveloppez"). == "|| }, télécharger: function () {$ (". télécharger"). sur ("cliquez", fonction () {$ (this) .children (". pic"). toggle (300);}); }, createCode: function () {// code de vérification var selectChar = nouveau tableau (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' code = ""; var CodeLength = 4; // La longueur du code de vérification pour (var i = 0; i <CodeLength; i ++) {var index = math.floor (math.random () * selectCharch.length); // Code aléatoire + = selectChar [index]; //$("#createCade").html(code)} return $ ("# createCade"). html (code); }, ClickCode: function () {// Switch Verification code var $ this = this; $ ("# createCade"). sur ("cliquez", fonction () {return $ this.createcode ();}); }}; </cript> </ body> </html>Ce qui précède est le code complet du développement Web Java imitant la page d'accueil de Zhihu introduite par l'éditeur. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!