Ketika saya bebas, saya menulisnya berdasarkan beranda Zhihu dan merujuk beberapa informasi untuk mensimulasikannya, termasuk latar belakang dinamis, serta fungsi login dan pendaftaran.
Masuk di sini adalah menggunakan keamanan musim semi
Pendaftaran dikirim oleh Ajax
Kode spesifiknya sangat sederhana, Anda dapat mengetahui sekilas yang mencakup pemeriksaan data, dll.
<%@ 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"> <itement> </itement> <script src = "jQuery/jQuery.js"> </script> <style> body {padding: 0; margin: 0; latar belakang: #f7fafc;} A {padding: 0; .Index-box {lebar: 300px; tinggi: auto; margin: 0 auto; margin-top: 40px;} .logo {latar belakang: url (gambar/header/headernew.png) no-repeat ;; lebarnya: 350px; tinggi: 100px; margin: 0 auto}. #707171; font-weight: bold; margin: 30px auto;} .index-body {text-align: center;} .nav-sliders {position: relatif; display: inline-block; font-font: 20px;} .nav-slider> a {font-sife: 20px; "Microsoft Yahei"; warna: #999; kursor: pointer; float: left; $ width} .nav-sliders> a.active {color: #0f88eb;} .Nav-Sliders> span {Posisi: absolute; tinggi: 2px; latar belakang: #0F88EB:-blok:-blok; .spage {position: absolute; kiri: 0; atas: 0; lebar: 100%; tinggi: 100%; latar belakang: #f7fafc;} .login-box {lebar: 300px;} .wrap {border: 1px solid #d5d5d5; border-radius: 5px; latar belakang: #ffff;}}} {}} {}} {}} {}} {oPFFF; .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; visibilitas: tersembunyi; kursor: teks;} .wrap> div> label.move {transform: translate (0,0); transisi: semua 0,5 kemudahan-keluar; -webkit-transform: translate (0,0); transisi: semua 0,5s kemudahan; -webkit-transform: translate (0,0); Transisi: semua 0,5S kemudahan; -webkit-transform: translate (0,0); visible;} .password {border-top: solid 1px #d5d5d5;} .code {right: 115px;} .name {right: 5px;} .loginname {right: 5px;} .loginpass {kanan: 5px;} .pass {hight: 5pass: 5pass: 5pass: 5pass: 5pass: 5pass: 5pass: 5pass: 5pass: 5pass: 5pass: 5pass: 5pass: 5pass: 5pass: 5pass: 5pass: 5pass: 5pass: 5pass: 5pass: 5pass {5pxs; .passagain {kanan: 5px;} .button {tinggi: 40px; latar belakang: #0F88EB; text-align: center; line-height: 40px; border-radius: 5px; margin-top: 25px; warna: #fff; font-family: "microsoft yaheion"; left;margin-top: 20px;font-family: "Microsoft Yahei";color: #666666;} .remember>a{float:right;cursor: pointer;color: #666666;} .other{text-align: left;margin-top: 20px;font-family: "Microsoft Yahei";color: #666666; overflow: tersembunyi;} .other> span {font-size: 14px; float: left; margin-top: 2px; kursor: pointer;} .other> div {float: left; transisi: semua kemudahan-in; -webkit-transisi); semua kemudahan 0; transisi: 0; 0; transisi: 0; Transform: -webkit-Transition): semua kemudahan 0; Opacity: 0; 0; 0; Transformate: -webkit-Transition): semua kemudahan 0; Opacity: 0; 0; 0; Transformate: -webkit-Transition): semua kemudahan 0; Opacity: 0; 0; 0; 0; Transformate: -webkit-Transition): semua kemudahan 0; Opacity: 0; 0; 0; translatex (-18px);-moz-transform: translatex (-18px); visibilitas: tersembunyi;} .other> div> a {margin-left: 20px; warna: #666666; font-ukuran: 15px;}.-lainnya> .hidden {transisi: semua kemudahan 1; 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: "Microsoft Yahei";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);} .Segistered-box {width: 300px; display: none;} .text{font-size: 14px;margin-top: 20px;font-family: "Microsoft Yahei";color: #666666;} .text>a{color: #0f88eb;} .verification-code{position: absolute;right:22px;top: 14px;font-family: "Microsoft Yahei "; font-size: 18px; kursor: pointer;} #register: hover {opacity: 0.7;} #login: hover {opacity: 0.7;} </style> </head> <body> <v style =" z-index: 999; Posisi: relatif "> </h1> h1 </h1 </h1 </h1 </999; Posisi: relatif"> </h1> h1 </h1 </h1 </h1 </999; posisi: relative "> </h1> h1 </h1 </h1 </h1; </div> <div> <a id = "LoginButton"> Login </a> <a> Daftar </a> <span> </span> </div> <div> <!-Login start-> <vet> <form id = "LoginForm" Action = "$ {pagecontext.request.contextPath}/j_speK" <input type="email" 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> <input id = "RememberMe" name = "_ spring_security_remember_me" type = "checkbox"> Remember Me: </label> <a> tidak dapat masuk? </a> </div> </forme> <Div> <span> Social Account Social Login </Span> </a> </dorm> <form> <Div> <span> Social Account Social Login </Span> </a> </Div> <Form> <Div> <span> Social Account Social Login </Span> </Div> = "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> </diver> <!-loin end-"end =" end = "end =" LIGORT-</div> </Diver> <!-LOGIN end-"LOGOR" "DEFORM-" LEGORT-"DEFORM-" DEFORT> </DIV> </DIV> <! action="registerUser.do"> <div> <div> <input type="email" name="name" value="" id="name" placeholder="user name (email)"> <label>Please enter the username</label> </div> <!-- <div> <input type="text" id="phone" value="" placeholder="Mobile Number"> <label>Please enter your mobile number</label> </div> --> <div> <input type="password" id="passwor" name="passwor" value="" placeholder="password"> <label>Please enter your password</label> </div> <div> <input type="password" id="pssworAgain" name="" value="" placeholder="Enter password again"> <label>Please enter your password again</label> </div> <div> <input type="text" id="code" 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> <script> "Gunakan ketat"; (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: l/ 2, Radius: 180}, k = 40, e = 60, a = [], b; g.width = c; g.height = l; h.raf = h.requestanimationframe || webkitrequestanimationFrame || fungsi (p) { kembalikan setTimeout (p, 1000/60);}; h.caf = h.cancelanimationFrame || webkitcancelanimationframe || function (p) {clearTimeout (p);}; function.prototype.method = function (q, p) {return this.prototype [q] =, this, this; 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._ismove) {this.move (); return;} if (this.timer ++ === this._moveFrames) {this.setMove ();}}). Metode ("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;}). Metode ("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;}}). Metode ("getalpha", function (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;}). Metode ("kemudahan", fungsi (q, p, s, r) {if (q/q/= r/2) <1) -s/2*((-q)*(q-2) -1)+p;}). Metode ("_ moveFrame", e); fungsi 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; untuk (; r <t; r ++) {untuk (s = 0; s <v; s ++) {u = baru 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 & 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 ();} fungsi 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.clientlistener ("mousemove", function (p) {jx = p.clientlistener ddeventListener ("ubah ukuran", fungsi () {caf (b); a = []; f = g.getBoundingClientRect (); g.width = c = f.width; g.height = l = f.height; m ();}, false); m ();}) (ini, dokumen. </script> <script> var code; // Tentukan kode verifikasi global $ (function () {jcpublic.register (); jcpublic.tab (); jcpublic.login ();/ * jcpublic.download (); */jcpublic.createCode (); jcpublic. $ (". Wrap> Div> Input"). Focus (function () {$ (this) .css ({"outline": "none"}); var $ this = $ (this); $ this.next ("label"). Removeclass ("move");/Sembunyikan informasi cepat}); $ (ini) .parent (). Anak -anak ("Div"). ToggleClass ("Tersembunyi"); var jcpublic = {register: function () {// register var currentThis = this; // objek saat ini $ ("#register"). on ("click", function () {var $ this = $ (this); var name = $ ("#name"). val (); // name var regegorName = document.getElementByDyId ("name"); valoW = "val =" ("val"; "VAL (" VAL ";" VAL ";" VAL ";" VAL "; $ ("#pssworagain"). Val (); == "NULL") {$ this.prev (". Wrap"). Find (". alamat "). addClass (" move "); return false;} lain jika (passwor ==" "|| kata sandi ==" tidak terdefinisi "|| kata sandi == null) {$ this.prev (". Wrap "). find (". pass "). AddClass (" move "); return false;} lain jika (passworagain ==" | kata sandi == null) {$ this.prev (". wrap"). find (". passagain"). addClass ("move"); mengembalikan false; } lain if (passworAgain == "" || passwordagain == "tidak terdefinisi" || passwordagain == null) {$ this.prev (". Wrap"). find (". passagain"). addClass ("move"); mengembalikan false; } lain if (passworAgain! = kata sandi) {$ this.prev (". wrap"). find (". passagain"). html ("Harap pastikan kata sandi yang dimasukkan konsisten"). addClass ("pindahkan"); mengembalikan false; } else if (code! == kode) {$ this.prev (". Wrap"). find (". code"). html ("kode verifikasi salah"). 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){ Peringatan: "+xmlhttpribeest.status+" ,, "+textstatus); }); /* $ ("#registerForm"). AJAXSUBMIT (FUNGSI (Pesan) {ALERT (Message.MessageString);}); */}}); }, Tab: function () {// sakelar pendaftaran dan login $ (". Nav-Sliders> a"). On ("click", function () {$ (this) .addclass ("Active"). $ (ini) .index (); // index $ (". on"). Stop (true, true) .animate ({"kiri": $ width*$ index+5+"px"}, 300); }); }, login: function () {$ ("#login"). on ("click", function () {var $ this = $ (this); var username = $ ("#username"). val (); var password = $ ("#password"). val (); var checkLoginName = document.getelementByid ("Uswand"). (UserName.length == 0)) {// Tidak ada yang sama $ this.prev (". Bungkus"). Temukan ("Label"). AddClass ("Move"); $ this.prev (". Bungkus"). Temukan (". ||. }, download: function () {$ (". Unduh"). on ("click", function () {$ (this) .children (". pic"). toggle (300);}); }, createCode: function () {// kode verifikasi var selectChar = array baru (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' kode = ""; var codelength = 4; // Panjang kode verifikasi untuk (var i = 0; i <codelength; i ++) {var index = math.floor (math.random ()*selectChar.length); // kode acak+= selectChar [index]; //$("#createCade").html(code)} return $ ("#createCade"). html (kode); }, clickCode: function () {// sakelar kode verifikasi var $ this = this = this; $ ("#createCade"). on ("click", function () {return $ this.createCode ();}); }}; </script> </body> </html>Di atas adalah kode lengkap pengembangan web Java yang meniru beranda Zhihu yang diperkenalkan oleh editor. Saya harap ini akan membantu semua orang. Jika Anda memiliki pertanyaan, silakan tinggalkan saya pesan dan editor akan membalas semua orang tepat waktu. Terima kasih banyak atas dukungan Anda ke situs web Wulin.com!