在掌握了 Javascript 网页设计的基础交互功能后，我们可以进一步探索更高级的应用，为网页添加更多的动态效果和复杂的交互逻辑，提升用户体验。今天，我们将在之前的用户登录页面案例基础上进行扩展，展示一些进阶的 Javascript 网页设计技巧。
一、案例扩展目标
我们将对之前的登录页面进行优化，使其在用户输入用户名和密码时，能够实时验证输入的合法性，并给出相应的提示。此外，当登录成功后，页面将跳转到一个欢迎页面，而不是仅仅弹出一个欢迎消息。同时，我们还将为页面添加一些动画效果，使页面的过渡更加平滑和美观。
二、实时输入验证
为了实现实时输入验证，我们需要为用户名和密码输入框分别添加 "input" 事件监听器。在事件处理函数中，我们可以使用正则表达式来验证输入是否符合要求。
// 为用户名输入框添加 input 事件监听器
usernameInput.addEventListener('input', function () {
const username = usernameInput.value;
// 简单的用户名验证，只允许字母和数字
const usernamePattern = /^[a-zA-Z0-9]+$/;
if (usernamePattern.test(username)) {
// 如果符合要求，清除错误提示（如果有）
usernameInput.nextElementSibling?.remove();
} else {
// 如果不符合要求，显示错误提示
if (!usernameInput.nextElementSibling) {
const errorSpan = document.createElement('span');
errorSpan.textContent = 'Username should only contain letters and numbers.';
errorSpan.style.color ='red';
usernameInput.insertAdjacentElement('afterend', errorSpan);
}
}
});
// 为密码输入框添加 input 事件监听器
passwordInput.addEventListener('input', function () {
const password = passwordInput.value;
// 简单的密码验证，至少 6 位
const passwordPattern = /^.{6,}$/;
if (passwordPattern.test(password)) {
// 如果符合要求，清除错误提示（如果有）
passwordInput.nextElementSibling?.remove();
} else {
// 如果不符合要求，显示错误提示
if (!passwordInput.nextElementSibling) {
const errorSpan = document.createElement('span');
errorSpan.textContent = 'Password should be at least 6 characters long.';
errorSpan.style = 'color: red';
passwordInput.insertAdjacentElement('afterend', errorSpan);
}
}
});
在上述代码中，我们为用户名输入框和密码输入框分别添加了 "input" 事件监听器。当用户在输入框中输入内容时，事件将被触发。在事件处理函数中，我们使用正则表达式对输入内容进行验证。如果输入符合要求，我们使用 "nextElementSibling" 属性检查并移除可能存在的错误提示元素；如果输入不符合要求，并且没有错误提示元素存在，我们创建一个新的 "span" 元素来显示错误提示，并将其插入到输入框的后面。
三、页面跳转与过渡效果
当登录成功后，我们希望页面能够平滑地跳转到欢迎页面。为此，我们可以使用 "window.location.href" 属性来实现页面跳转，并结合 CSS 动画来添加过渡效果。
首先，在 HTML 文件中添加一个欢迎页面的 div 元素，并设置其初始状态为隐藏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<style>
/* 之前的样式省略 */
/* 欢迎页面样式 */
.welcome-page {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #f9f9f9;
text-align: center;
padding-top: 100px;
animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<form id="loginForm">
<!-- 表单内容省略 -->
</form>
<div class="welcome-page">
<h1>Welcome!</h1>
</div>
<script src="script.js"></script>
</body>
</html>
然后，在 Javascript 代码中，当登录成功时，设置欢迎页面的显示，并触发动画效果：
// 登录成功时的处理函数
function handleLoginSuccess(username) {
// 设置欢迎页面显示
const welcomePage = document.querySelector('.welcome-page');
welcomePage.style.display = 'block';
// 等待一段时间后，跳转到新页面（这里只是模拟，实际可以跳转到真实的欢迎页面）
setTimeout(() => {
window.location.href = 'welcome.html';
}, 1000);
}
// 在登录验证成功的地方调用 handleLoginSuccess 函数
if (username === correctUsername && password === correctPassword) {
handleLoginSuccess(username);
}
在上述代码中，我们定义了一个 "handleLoginSuccess" 函数，当登录成功时，该函数将获取欢迎页面的元素，并设置其 "display" 属性为 "block"，使其显示出来。同时，使用 "setTimeout" 函数设置了一个延迟，在延迟 1 秒后，使用 "window.location.href" 属性跳转到一个名为 "welcome.html" 的页面。在 CSS 中，我们为欢迎页面设置了一个 "fadeIn" 动画，使其从透明逐渐变为不透明，实现了平滑的过渡效果。
通过这个案例的进阶学习，我们掌握了如何使用 Javascript 实现实时输入验证、页面跳转以及添加动画效果等进阶交互与动态效果。这些技巧能够让我们设计出更加友好、美观和功能强大的网页。在实际的网页设计项目中，我们可以根据需求灵活运用这些技术，不断提升网页的质量和用户体验。