Когда я был свободен, я написал это на основе домашней страницы Чжиху и ссылался на некоторую информацию для ее имитации, включая динамический фон, а также в системе входа в систему и регистрации.
Войти здесь использует Spring Security
Регистрация отправляется Ajax
Конкретный код очень прост, вы можете сказать с первого взгляда, который включает проверку данных и т. Д.
<%@ 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"> <title> </title> <script src = "jquery/jquery.js"> </script> <style> body {padding: 0; Margin: 0; фон: #f7fafc;} {{text-decator: nom; .index-box {ширина: 300px; высота: авто; маржа: 0 Auto; Margin-top: 40px;} .logo {founal: url (изображения/Header/Headernew4.png) no-repeat ;; ширина: 350px; высота: 100px; margin: 0 auto} .title {font-size: 18px; #707171; Font-Weight: Bold; Margin: 30px auto;} .Index-body {text-align: center;} .nav-sliders {позиция: относительно; дисплей: inline-block; margin-bottom: 20px;} .nav-sliders> a {font-size: 20px; inline-block; "Microsoft Yahei"; Color: #999; Cursor: Pointer; float: left; $ width} .nav-sliders> a.active {color: #0f88eb;} .nav-sliders> span {position: Absolute; Height: 2px; фон: #0f88eb; displyders: block; lost: 5px; .stage {Положение: Абсолют; слева: 0; Top: 0; ширина: 100%; высота: 100%; фон: #f7fafc;} .login-box {width: 300px;} .wrap {border: 1px solid #d5d5d5; граница-радис: 5px; фон: #ffff;}. .wrap> div> input {ширина: 95%; граница: нет; прокладка: 17px 2,5%; граница-радиус: 5px;} .wrap> div> label.error {позиция: абсолют; цвет: #c33; top: 0; line-height: 50px; transformpators (25px, 0); Перевести (25px, 0);-Moz-Transform: Translate (25px, 0); непрозрачность: 0; видимость: скрыта; курсор: текст;} .wrap> div> label.move {transform: translate (0,0); переход: все 0,5 с легкость; -webkit-transform: translate (0,0); 1; видимость: visible;} .password {border-top: solid 1px #d5d5d5;} .code {справа: 115px;} .name {справа: 5px;} .loginname {справа: 5px;} .loginpas .passagain {справа: 5px;} .button {height: 40px; фон: #0f88eb; text-align: center; line-height: 40px; граница-радиус: 5px; margin-top: 25px; color: #ff; font-family: "microsoft yahei"; cursor: pinter; Слева; Маржинайка: 20px; font-family: "microsoft yahei"; цвет: #666666;} .remember> a {float: справа; курсор: указатель; цвет: #666666;}. Другое {текстовое выражение: слева; Маржа-топ: 20px; font-famil #666666; переполнение: скрыто;}. Другое> span {font-size: 14px; float: слева; Margin-top: 2px; cursor: pointer;}. Другое> div {float: слева; Переход: все 1s ext-in; -В. Translatex (-18px);-Moz-Transform: transtatex (-18px); видимость: скрыто;}. Другой> div> a {margin-left: 20px; цвет: #666666; font-size: 15px;} .other> .hidden {indition: All 1s-inder in show: way-ine-in yase in allanse: allanse: allanse: allanse: allanse: allansist: allansist: allanse: allanse: allansist: allanse: allanse: allanse: allanse: allanse: allanse:; 1; Transform: Translatex (0);-WebKit-Transform: Translatex (0);-MOZ-Transform: Transtatex (0); видимость: visible;} .download {граница: твердый 1px #0f88eb; высота: 40px; line-hight: 40px; граница-радий: 5px; #0f88eb; Yahei "; Margin-Top: 50px; Cursor: Pointer; положение: относительно;} .download> .close {Display: none;} .download .pic {Display: none; положение: абсолют; фон: #fff; внизу: 78px; ширина: 310px; слева: -10px; z-index: 5; Padding: 40px 0; 0 0 8px 0 rgba (0,0,0, .15);}. Зарегистрированная бокс {ширина: 300px; дисплей: none;} .text {font-size: 14px; margin-top: 20px; font-family: «microsoft yahei»; цвет: #666666;} .text> a {color: #0f88eb;} .Verification-code {position: Absolus; Yahei "; font-size: 18px; cursor: pointer;} #register: hover {opacity: 0.7;} #login: hover {непрозрачность: 0,7;} </style> </head> <body> <div style =" z-index: 9999; позиция: относительно "> <div> <h1> </h1> <h2> <h2> <h2> <h2> <h2> <h2> <h2> <h2> <h2> <h2> <h2> <h2> <h2> <h2> <h2> <H2 </div> <div> <a id = "loginbutton"> login </a> <a> регистр </a> <pan> </span> </div> <div> <!-Login Start-> <div> <form id = "loginform" action = "$ {pagecontext.request.contextpath}/j_spring_sececure_sheck_cepece. type = "email" id = "username" name = 'j_username' value = "" placeholder = "username"> <babel> Пожалуйста, введите имя входа в систему (адрес электронной почты) </label> </div> <div> <input type = "password" id = "пароль" name = 'j_password' placeler = "> </label </label> </label> </label> </label> </label> </label> </label> </label> </label> </label> </label> </label> </label> </label> </label> id = "login"> login </div> <div> <babel> <input id = "homplyme" name = "_ spring_security_remember_me" type = "fackbox"> помнить меня: </label> <a> не может войти в систему? = "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-> <! Action = "registerUser.do"> <div> <div> <input type = "email" name = "name" value = "" id = "name" wackholder = "имя пользователя (электронная почта)"> <babel> Пожалуйста, введите имя пользователя </label> </div> <!- <div> <input type = "text" id = "телефон" value = "" Заполнител = "label> <> label label> label> label> label> label> label> label> label> label> <> label> label> label> with number> <> label> label> label> --> <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"> <babel> Пожалуйста, введите код проверки </label> <div id = "createcade"> </div> </div> </div> <div id = "Регистр"> Регист <canvas id = "canvas" style = "z-index: 1000"> </canvas> <script> "strict"; (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/ 2, радиус: 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 = function (q, p) {return this.prototype [q] = p, this;}; 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]]; this._moveframes) {this.setmove ();}}). Method ("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;}). Method ("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;}}). Method ("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;}). Метод («легкость», функция (q, p, s, r) {if (q/= r/2) <1) {return S/2*q; -s/2*((-q)*(q-2) -1)+p;}). Method ("_ moveframes", 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; 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 & 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 ("mouseMever", function (p) {jx = p.clientx-f.left; jy = p.clienty-f.top; 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 (); ();/jcpublic.createcode (); jcpublic.clickcode (); $ (". wrap> div> input"). Focus (function () {$ (this) .css ({"upline": "none"}); var $ this = $ (this); $ this.next ("label"). removeclass ("Move"); // скрыть быструю информацию}); $ (this) .parent (). Дети ("div"). Toggleclass ("Hidden"); var jcpublic = {register: function () {// regress var currentthis = this; // текущий объект $ ("#regist"). on ("click", function () {var $ this = $ (this); var name = $ ("#name"). val (); // name var Registername = document.getElementbyid ("name"); $ ("#pssworagain"). val (); || name == "Null") {$ this.prev (". Адрес "). addClass (" move "); return false;} else if (passwor ==" "|| password ==" undefined "|| пароль == null) {$ this.prev (". passwordAgain == null) {$ this.prev (". вернуть ложь; } else if (passworagain == "" || passwordAgain == "undefined" || passwordAgain == null) {$ this.prev (". вернуть ложь; } else if (passworagain! = password) {$ this.prev (". вернуть ложь; } else if (code! == code) {$ this.prev (". вернуть currentThis.createCode (); // Обновление кода проверки и повторного ввода} else {// Отправить пользовательское приложение, чтобы добавить $ .ajax ({type: «post», url: «RegisterUser.do», Data: {«Имя»: имя, «пароль»: passwor Alert («Ошибка:»+xmlhttprequest.status+»,,,"+textStatus); }}); /* $ ("#Registerform"). AjaxSubmit (function (message) {alert (message.messagesting);}); */}}); }, Tab: function () {// Switch Registration and Login $ (".. Nav-Sliders> a"). On ("click", function () {$ (this) .AdClass ("active"). $ (this) .index (); // index $ (". On"). Stop (true, true) .Animate ({"left": $ width*$ index+5+"px"}, 300); $ (this) .parents (". Индекс-корпус"). Дети (". Изменение"). Дети (). Уравнение ($ index) .stop (true, false) .show (). }, login: function () {$ ("#login"). On ("click", function () {var $ this = $ (this); var username = $ ("#username"). val (); var password = $ ("#password"). val (); var checkloginname = document.getElementbyid ("username"); if (password. (username.length == 0)) {// В то же время $ this.prev (". $ this.prev (" "|| }, скачать: function () {$ (". скачать"). On ("click", function () {$ (this) .children (". Pic"). Toggle (300);}); }, createCode: function () {// код проверки 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 'x' x 'x' x 'j' j 'u' cantaites ') code = ""; var CodeLength = 4; // Длина кода проверки для (var i = 0; i <codeLength; i ++) {var index = math.floor (math.random ()*selectchar.length); // Случайный код+= selectChar [index]; //$("#createcade").html(code)} return $ ("#createcade"). html (code); }, clickCode: function () {// код проверки переключения var $ this = this; $ ("#createcade"). On ("click", function () {return $ this.createcode ();}); }}; </script> </body> </html>Выше приведено полный код Java Web Development, подражая домашней странице Zhihu, представленной редактором. Я надеюсь, что это будет полезно для всех. Если у вас есть какие -либо вопросы, пожалуйста, оставьте мне сообщение, и редактор ответит всем вовремя. Большое спасибо за вашу поддержку сайту wulin.com!