Als ich frei war, schrieb ich es basierend auf der Homepage von Zhihu und verwies auf einige Informationen, um sie zu simulieren, einschließlich dynamischer Hintergrund sowie Anmeldungs- und Registrierungsfunktionen.
Melden Sie sich hier an
Die Registrierung wird von Ajax gesendet
Der spezifische Code ist sehr einfach. Sie können auf einen Blick erkennen, der Datenüberprüfungen usw. enthält.
<%@ page Language = "java" import = "java.util. 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; .Index-box {width: 300px; Höhe: Auto; Rand: 0 Auto; #707171; Schriftgewicht: BOLD; Margin: 30px Auto; "Microsoft yahei"; Farbe: #999; Cursor: Zeiger; Float: links; $ width} .nav-Sliders> A.Active {Farbe: #0f88EB;} .nav-Sliders> Span {Position: Absolute; Höhe: 2px; Hintergrund: #0f88eB; .Stage {Position: absolut; links: 0; ober: 0; width: 100%; Höhe: 100%; Hintergrund: #f7fafc;} .Login-Box {width: 300px;} .wrap {Border: 1px solid #d5d5d5; Border-radius: 5px; Hintergrund: #FFF; .Wrap> div> Eingabe {Breite: 95%; Grenze: Keine; Padding: 17px 2,5%; Grenze-Radius: 5px;} .Wrap> div> label.Error {Position: Absolut; Farbe: #C33; Top: 0; Zeilenheigung: 50px; Transformation: Translate (25px, 0); Translate (25px, 0);-Moz-Transform: Translate (25px, 0); Opazität: 0; Sichtbarkeit: versteckt; 1; Sichtbarkeit: sichtbar;} .Password {Border-top: solide 1px #d5d5d5;} .code {rechts: 115px;} .name {rechts: 5px;} .LogInname {rechts: 5px;} .Loginpass {rechts: 5px;}. .Passagain {rechts: 5px;} .button {Höhe: 40px; Hintergrund: #0f88eb; Text-Align: Mitte; Linienhöhe: 40px; Border-Radius: 5px; Margin-top: 25px; Farbe: #fff; Schriftfamilie: "micosoft yahei"; 20px; Schriftfamilie: "Microsoft Yahei"; Farbe: #666666;} .Remember> a {float: rechts; Cursor: Zeiger; Farbe: #666666; versteckt;} .Other> span {Schriftgröße: 14px; float: links; Rand-Top: 2px; Cursor: Pointer;} .Other> div {float: links; Übergang: Alle 1S-Leichtigkeiten; translatex (-18px);-Moz-transform: translatex (-18px); Sichtbarkeit: versteckt;} .Other> div> a {margin-links: 20px; Farbe: #666666; Schriftgröße: 15px;} .other>. Leichtigkeit; Opazität: 1; Transform: Translatex (0);-Webkit-Transform: Translatex (0);-Moz-transform: translatex (0); Sichtbarkeit: sichtbar;} .download {Border: Solid 1px #0f88eb; Höhe: 40px; Line-Height: 40px; Border-Fam: 5px; Yahei "; Margin-Top: 50px; Cursor: Zeiger; Position: relativ;} .download> .CLOSE {Anzeige: Keine;} .download .pic {display: keine; Position: absolut; Hintergrund: #fff; unten: 78px; Breite: 310px; links: -10px; z-inx; z-inx: 5; 0 8px 0 RGBA (0,0,0, .15); Anzeige: Keine;} .Text {Schriftgröße: 14px; Margin-Top: 20px; Schriftfamilie: "Microsoft Yahei"; Farbe: #666666;} .Text> A {Farbe: #0f88EB; Yahei";font-size: 18px;cursor: pointer;} #register:hover{opacity: 0.7;} #login:hover{opacity: 0.7;} </style> </head> <body> <div style="z-index:9999;position:relative"> <div> <h1></h1> <h2>Speed4C Development Platform</h2> </div> <div> <a id = "loginButton"> login </a> <a> Register </a> <span> </span> </div> <div> <!-login start-> <div> <form id = "loginForm" action = "$ {pageContext.request.contextpath}/J_SPRING_SPRING_SPRING_SPRING_SPRING_SPRING_SPRING_SPRING_SPRING_SPRING_SECURITE_">/J_SPRING_SPRING_SPRING_SPRING_SECURITE_ ">/J_SPRING_SPRING_SPRING_SPRING_SECURITE". <Eingabe type = "E -Mail" id = "userername" name = 'j_username' value = "" placeholder = "username"> <label> Geben Sie den Anmeldenamen (E -Mail -Adresse) </label> </div> <div> <Eingabe type = "password" id = "password" name = 'j_password' placeholder = "kennwort" kennwort "kennwort" ein. id = "login"> login </div> <div> <label> <input id = "rememberMe" name = "_ spring_security_remember_me" type = "pokeBox"> remember me: </label> <a> kann sich nicht anmelden? = "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="color:red">${sessionScope.SPRING_SECURITY_LAST_EXCEPTION.message}</span> </div> </div> <!--Login end--> <!--Register start--> <div> <form id="registerForm" method="post" action = "registerUser.do"> <div> <div> <Eingabe type = "E-Mail" name = "name" value = "" id = "name" placeholder = "Benutzername (E-Mail)"> <Label> Bitte geben Sie die Benutzername ein. <Div> <Eingabe type = "password" id = "passWor" name = "passwor" value = "" placeholder = "password"> <label> Geben Sie Ihr Passwort ein. name="" maxlength="6" value="" placeholder="Verification Code"> <label>Please enter the verification code</label> <div id="createCade"></div> </div> </div> <div id="register">Register</div> </form> </div> <!--End of Registration--> </div> </div> </div> </div> <canvas id="canvas" style = "z-Index: 1000"> </canvas> <skript> "Verwenden Sie strikt"; (Funktion (h, d) {var g = typeof d === "String"? Dokument.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; return setTimeout (p, 1000/60);}; 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 ("zeichnen", function (p, v) {var s = this.closest, q, u, t = this.getalpha (r); if (t> 0) {P.Fillstyle = P.strokestyle = "rgba (156,217,249,"+t+")"; ath (); P. arc (this.x, this.y, this.Radius, 0, math.pi*2, true); {u = v [s [q]]; p.beginPath (); p.moveto (this.x, this.y); 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; thtimer = 0;}}). Methode ("getalpha", Funktion (s) {var 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;}) -S/2*((-q)*(q-2) -1)+p;}) 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; für (; r <t; r ++) {für (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]; o () {n.clearrect (0,0, c, l); A.foreach (Funktion (r, q, p) {R.Draw (n, p, j);}); b = raf (o);} g.addeventListener ("Mousemove", Funktion (p) {jx = p.clients; DDEventListener ("Größe", function () {caf (b); a = []; f = g.getBoundingClientRect (); </script> <script> var code; // einen globalen Verifizierungscode $ (function () {jcpublic.register (); jcpublic.tab (); jcpublic.login ();/ * jcpublic.download (); */jcpublic.createcode (); jcpublic.download (); $ (". Wrap> div> input"). Focus (function () {$ (this) .css ({"umrine": "Keine"}); var $ this = $ (this); $ this.Next ("label"). $ (this) .Parent (). Kinder ("Div"). ToggleClass ("Hidden"); var jcpublic = {Register: function () {// Register var currentthis = this; // aktuelles Objekt $ ("#register"). On ("click", function () {var $ this = $ (this); var name = $ ("#name"). val (); // Name var registerName $ ("#PSSWORAGAIN"). Val (); name == "null") {$ this.prev (". Wrap"). Adresse "). addClass (" move "); return false;} else if (passwor ==" "|| password ==" undefined "|| password == null) {$ this.prev (". Wrap "). find (" pass "). AddClass (" Move "); passwordagain == null) {$ this.prev (". Wrap"). Find (". PassAgain"). AddClass ("Move"); false zurückgeben; } else if (passworagain == "" || passwordagain == "undefined" || passwordAgain == null) {$ this.prev (". Wrap"). Find (". Passagain"). AddClass ("Move"); false zurückgeben; } else if (PassWoragain! = Passwort) {$ this.prev (". Wrap"). Find (". PassAgain"). HTML ("Bitte stellen Sie sicher, dass das eingegebene Passwort konsistent ist"). false zurückgeben; } else if (code! 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){ Alert ("Fehler:"+xmlhttprequest.status+",,"+textstatus); }); /* $ ("#registerForm"). AjaxSubmit (Funktion (message) {alert (message.messASTESTRING);}); */}}); }, Tab: function () {// Anmeldung und login $ (". Nav-Sliders> a"). On ("Click", function () {$ (this) .AddClass ("active"). Geschwister (). $ (this) .Index (); // index $ (". On"). Stop (true, true) .Animate ("links": $ width*$ index+5+"px"}, 300); }); }. (userername.length == 0)) {// nicht gleichzeitig $ this.prev (". Wrap"). Find ("Label"). $ this.prev (". Wrap") "||. }, download: function () {$ (". download"). on ("click", function () {$ (this) .Children ("pic"). Toggle (300);}); }, createCode: function () {// Verifizierungscode 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');//All candidates can also use the Chinese code = ""; var codelength = 4; // Die Länge des Verifizierungscodes für (var i = 0; i <codelength; i ++) {var index = math.floor (math.random ()*selectchar.length); // Zufallscode+= Selectchar [INDEX]; //$("#createcade").html(Code)} return $ ("#createcade"). html (Code); }, clickCode: function () {// Verifizierungscode für Schalter var $ this = this; $ ("#createCade"). on ("click", function () {return $ this.CreateCode ();}); }}; </script> </body> </html>Der oben genannte ist der vollständige Code der Java -Webentwicklung, das die vom Herausgeber eingeführte Zhihu -Homepage imitiert. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!