Javascript 网页设计案例：进阶交互与动态效果

在掌握了 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 = doc