عندما كنت حراً ، كتبت ذلك بناءً على الصفحة الرئيسية لـ Zhihu وأشارت إلى بعض المعلومات لمحاكاةها ، بما في ذلك الخلفية الديناميكية ، وكذلك وظائف تسجيل الدخول والتسجيل.
تسجيل الدخول هنا يستخدم أمان الربيع
يتم إرسال التسجيل من قبل أياكس
الرمز المحدد بسيط للغاية ، يمكنك معرفة لمحة تتضمن فحص البيانات ، إلخ.
<٪@ page language = "java" import = "java.util.*" pageencoding = "utf-8" ٪> <٪@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c 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 ؛ background: #f7fafc ؛ .index-box{width:300px;height: auto;margin:0 auto;margin-top: 40px;} .logo{background:url(images/header/headerNew4.png) no-repeat;;width: 350px;height: 100px;margin:0 auto} .title{font-size: 18px;text-align: center;color: #707171 ؛ Font-Weight: Bold ؛ Margin: 30px Auto ؛} .index-body {text-align: center ؛} .Nav-sliders {position: relative ؛ display: inline block ؛ inline-bottom: 20px ؛} .nav-sliders> a {font-size: 20px ؛ "Microsoft yahei" ؛ اللون: #999 ؛ المؤشر: مؤشر ؛ تعويم: اليسار ؛ $ عرض} .nav-sliders> A.Active {color: #0f88eb ؛} .nav-sliders> span {position: quient ؛ height: 2px ؛ #0f88eb ؛ display: left: 5px ؛ .stage {الموضع: مطلق ؛ اليسار: 0 ؛ أعلى: 0 ؛ العرض: 100 ٪ ؛ الارتفاع: 100 ٪ ؛ الخلفية: #f7fafc ؛} .login-box {width: 300px ؛} .wrap {border: 1px solid #d5d5d5 ؛ border-radius: 5px ؛ background: #ffff ؛}. .wrap> div> input {width: 95 ٪ ؛ الحدود: لا شيء ؛ حشوة: 17px 2.5 ٪ ؛ الحدود radius: 5px ؛} .wrap> div> label.error {الموضع: المطلق ؛ اللون: #c33 ؛ top: 0 ؛ line-height: 50px ؛ transform: 25px ، 0) ترجمة (25px ، 0) ؛-moz-transform: ترجمة (25px ، 0) ؛ العتامة: 0 ؛ الرؤية: مخفية ؛ المؤشر: نص ؛} .wrap> div> label.move مرئي ؛} .password {border-top: solid 1px #d5d5d5 ؛} .code {right: 115px ؛} .name {right: 5px ؛} .loginname {right: 5px ؛} .loginpass {right: 5px ؛} .pass {right:}}. .passagain {right: 5px ؛} .button {الارتفاع: 40px ؛ الخلفية: #0f88eb ؛ text-align: center ؛ line-height: 40px ؛ border-radius: 5px ؛ margin-top: 25px ؛ color: #fff ؛ font-family: "microsoft yahei" ؛ اليسار ؛ الهامش: 20px ؛ Font-Family: "Microsoft Yahei" ؛ اللون: #666666 ؛ #6666666 ؛ Overflow: Hidden ؛}. Translatex (-18px) ؛-moz-transform: translatex (-18px) ؛ الرؤية: مخفي ؛}. 1 ؛ التحويل: Translatex (0) ؛-WebKit-transform: Translatex (0) ؛-Moz-Transform: Translatex (0) ؛ الرؤية: مرئية ؛}. Yahei "؛ Margin-Top: 50px ؛ المؤشر: مؤشر ؛ الموضع: قريب ؛}. 0 8px 0 rgba (0،0،0 ، .15) ؛} .registered-box {width: 300px ؛ العرض: none ؛} .text {font-size: 14px ؛ margin-top: 20px ؛ font-family: "microsoft yahei" ؛ color: #666666 ؛} yahei "؛ font-size: 18px ؛ المؤشر: مؤشر ؛} #register: hover {opacity: 0.7 ؛} #login: hover {opacity: 0.7 ؛} </style> </head> <body> <div style =" z-index: 9999 ؛ الموقف: related " </viv> <viv> <a id = "loginbutton"> تسجيل الدخول </a> <a> <a> سجل </a> </span> </span> </viv> <viv> <!-تسجيل الدخول-> <div> <form id = "loginform" Action = "$ {pagecontext.Request.Context. type = "elem" id = "username" name = 'j_username' value = "" placeholder = "username"> <sably> الرجاء إدخال اسم تسجيل الدخول (عنوان البريد الإلكتروني) </label> </div> <iv> <inputy type = "password" id = "password" <div> <billy> <input id = "relectme" name = "_ Spring_Security_Remment_me" type = "checkbox"> تذكرني: </label> <a> لا يمكن تسجيل الدخول؟ = "javaScript: volid (0) ؛ style = "color: red"> $ {sessionscope.spring_security_last_exception.message} </span> </viv> </viv> <!-login end-> <! placeholder = "اسم المستخدم (البريد الإلكتروني)> <blabel> الرجاء إدخال اسم المستخدم </label> </viv> <!-<div> <input type =" text "id =" phone "value =" "placeholder =" mobile nump كلمة المرور </label> </viv> <viv> <inputire type = "password" id = "pssworagain" name = "" value = "" placeholder = "Enter Password مرة أخرى"> <sable> الرجاء إدخال كلمة المرور الخاصة بك مرة أخرى </label> </viv> <div> <input type = "text" id = "code" name = "maxLength =" 6 "value = id = "createCade"> </viv> </viv> </viv> <div id = "register"> سجل </div> </form> </div> <!-نهاية التسجيل-> </div> </viv> </viv> </div> <canvas id = "canvas" style = z-index: 1000 "> 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) {p) {p) { return setTimeOut (p ، 1000/60) ؛} ؛ h.caf = h.cancelanimationframe || webkitcancelanimationframe || function (p) {cleartimeout (p) ؛} ؛ function.prototype.method = function (q ، p) 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 ، 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) ؛ p.lineto (ux ، uy) ؛ p.stroke () ؛}}} if (this._ismove) {this.move () ؛ return ؛} if (this.timer ++ === 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 ؛}) 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 ؛}) -S/2*((-Q)*(q-2) -1)+p ؛}). الطريقة ("_ 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 ("mousemove" ، وظيفة (p) {jx = p.clientx-f.left ؛ ddeventListener ("desize" ، 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 () ؛ $ (this) .css ({"Outly": }) ؛ var jcpublic = {register: function () {// register var currentThis = this ؛ // الكائن الحالي $ ("#register"). على ("انقر" ، الدالة () {var $ this = $ (this) ؛ var name = $ ("#name"). val () ؛ $ ("#pssworagain". Val () ؛ name == "null") {$ this.prev (". wrap"). العنوان "). addClass (" move ") ؛ return false ؛} آخر إذا (passwor ==" "|| password ==" غير محدد "|| password == null) {$ this.prev (". wrap "). passwordagain == null) {$ this.prev (". wrap"). العودة كاذبة } آخر إذا (passworagain == "" || passwordagain == "undefined" || passwordagain == null) {$ this.prev (". wrap"). العودة كاذبة } آخر إذا (passworagain! = password) {$ this.prev (". wrap"). البحث (". passagain"). html ("يرجى التأكد من أن كلمة المرور التي تم إدخالها متسقة"). addClass ( العودة كاذبة } آخر إذا (رمز! == رمز) {$ this.prev (". wrap"). find (". code"). html ("رمز التحقق غير صحيح"). addClass ("move") ؛ return currentThis.createCode () ؛ // قم بتحديث رمز التحقق وإعادة الدخول} آخر {// أرسل تطبيق المستخدم لإضافة $ .ajax ({type: "post" ، url: "registerUser.do" ، data: {"name": name ، "password": passwor} ، datatype: "json" التنبيه ("خطأ:" }) ؛ /* $ ("#registerform"). ajaxsubmit (وظيفة (رسالة) {Alert (message.messageString) ؛}) ؛ */}}) ؛ } ، علامة التبويب: function () {// switch التسجيل وتسجيل الدخول $ (". $ (this) .index () ؛ // index $ (". on"). توقف (صحيح ، صحيح). }) ؛ } ، تسجيل الدخول: function () {$ ("#login"). on ( (username.length == 0) {// nont في نفس الوقت $ this.prev (". التفاف"). $ this.prev (" "||. } ، download: function () {$ (". download"). on ("click" ، function () {$ (this) .Children ( } ، CreateCode: function () {// code code var selectar = 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' ، us z the quann الكود = "" ؛ var codeLength = 4 ؛ // طول رمز التحقق لـ (var i = 0 ؛ i <codeLength ؛ i ++) {var index = math.floor (math.random ()*selectar.length) ؛ // Random Code+= Selectchar [index] ؛ //$("#createcade").html(code)} return $ ("#createCade"). html (code) ؛ } ، clickcode: function () {// switch code var $ this = this ؛ $ ("#createCade"). on ("click" ، function () {return $ this.createCode () ؛}) ؛ }} ؛ </script> </body> </html>ما ورد أعلاه هو رمز كامل لتطوير الويب Java يقلد الصفحة الرئيسية Zhihu التي قدمها المحرر. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!