河南城市建设招标类网站,手机网站酷站,电商运营平台,昆山网站制作昆山网站建设下面是使用HTML和JavaScript实现的一个中文版登录界面#xff0c;包含登录、注册和修改密码功能。注册成功后会显示提示信息#xff0c;在登录成功后进入一个大大的欢迎页面。
1.代码展示
!DOCTYPE html
html langzh-CN
headmeta …下面是使用HTML和JavaScript实现的一个中文版登录界面包含登录、注册和修改密码功能。注册成功后会显示提示信息在登录成功后进入一个大大的欢迎页面。
1.代码展示
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title用户认证系统/titlestylebody {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f4f4f9;}.container {width: 300px;padding: 20px;background-color: white;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);border-radius: 5px;text-align: center;}h2 {margin-bottom: 20px;}form {display: flex;flex-direction: column;}input[typetext],input[typepassword] {margin-bottom: 10px;padding: 10px;border: 1px solid #ccc;border-radius: 5px;width: 100%;}button {padding: 10px;background-color: #007bff;color: white;border: none;border-radius: 5px;cursor: pointer;width: 100%;}button:hover {background-color: #0056b3;}.message {margin-top: 10px;}.success {color: green;}.error {color: red;}#welcome-container {width: 400px;padding: 40px;background-color: #d4edda;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);border-radius: 10px;text-align: center;}#welcome-message {font-size: 24px;margin-bottom: 20px;}/style
/head
bodydiv classcontainer idlogin-containerh2登录/h2form idlogin-forminput typetext idlogin-username placeholder用户名 requiredinput typepassword idlogin-password placeholder密码 requiredbutton typesubmit登录/button/formp classmessage error idlogin-error/pp classmessagea href# onclickshowRegisterForm(); return false;注册新账号/a/p/divdiv classcontainer idregister-container styledisplay: none;h2注册/h2form idregister-forminput typetext idregister-username placeholder用户名 requiredinput typepassword idregister-password placeholder密码 requiredbutton typesubmit注册/button/formp classmessage success idregister-success/pp classmessage error idregister-error/pp classmessagea href# onclickshowLoginForm(); return false;返回登录/a/p/divdiv classcontainer idchange-password-container styledisplay: none;h2修改密码/h2form idchange-password-forminput typepassword idold-password placeholder旧密码 requiredinput typepassword idnew-password placeholder新密码 requiredbutton typesubmit修改密码/button/formp classmessage error idchange-password-error/pp classmessagea href# onclickshowWelcomePage(); return false;返回欢迎页面/a/p/divdiv idwelcome-container styledisplay: none;h2 idwelcome-message/h2button onclickshowChangePassword()修改密码/buttonbutton onclicklogout()注销/button/divscriptlet users [];let currentUser null;document.getElementById(login-form).addEventListener(submit, function(event) {event.preventDefault();const username document.getElementById(login-username).value;const password document.getElementById(login-password).value;const user users.find(user user.username username user.password password);if (user) {currentUser user;showWelcomePage();} else {document.getElementById(login-error).textContent 无效的用户名或密码;}});document.getElementById(register-form).addEventListener(submit, function(event) {event.preventDefault();const username document.getElementById(register-username).value;const password document.getElementById(register-password).value;if (!users.find(user user.username username)) {users.push({ username, password });document.getElementById(register-success).textContent 注册成功;setTimeout(() {document.getElementById(register-success).textContent ;}, 3000);document.getElementById(register-username).value ;document.getElementById(register-password).value ;showLoginForm();} else {document.getElementById(register-error).textContent 用户名已存在;}});document.getElementById(change-password-form).addEventListener(submit, function(event) {event.preventDefault();const oldPassword document.getElementById(old-password).value;const newPassword document.getElementById(new-password).value;if (currentUser currentUser.password oldPassword) {currentUser.password newPassword;users users.map(user user.username currentUser.username ? { ...user, password: newPassword } : user);document.getElementById(change-password-error).textContent 密码修改成功;setTimeout(() {document.getElementById(change-password-error).textContent ;}, 3000);hideChangePassword();} else {document.getElementById(change-password-error).textContent 旧密码不正确;}});function showWelcomePage() {document.getElementById(login-container).style.display none;document.getElementById(register-container).style.display none;document.getElementById(change-password-container).style.display none;document.getElementById(welcome-container).style.display block;document.getElementById(welcome-message).textContent 欢迎, ${currentUser.username};}function logout() {currentUser null;document.getElementById(welcome-container).style.display none;document.getElementById(login-container).style.display block;}function showRegisterForm() {document.getElementById(login-container).style.display none;document.getElementById(register-container).style.display block;document.getElementById(login-error).textContent ; // Clear login error message}function showLoginForm() {document.getElementById(register-container).style.display none;document.getElementById(login-container).style.display block;document.getElementById(register-success).textContent ; // Clear registration success messagedocument.getElementById(register-error).textContent ; // Clear registration error message}function showChangePassword() {document.getElementById(welcome-container).style.display none;document.getElementById(change-password-container).style.display block;}function hideChangePassword() {document.getElementById(change-password-container).style.display none;document.getElementById(welcome-container).style.display block;}/script
/body
/html
2.功能说明
这个应用程序使用纯HTML和JavaScript实现。
包含登录、注册和修改密码功能。注册成功后会显示一条绿色的成功消息并在3秒后自动消失。登录成功后用户会被带到一个大大的欢迎页面。用户可以点击“注销”按钮退出登录。提供了从登录页面跳转到注册页面和从注册页面返回登录页面的链接。欢迎页面中有一个“修改密码”的按钮可以跳转到修改密码页面。
3.效果图
