当前位置：首页 > JavaScript

js 实现登录显示

2026-02-02 23:34:54JavaScript

实现登录显示的基本方法

使用JavaScript实现登录显示功能通常涉及DOM操作、事件监听和表单验证。以下是常见的实现方式：

HTML结构

<div id="login-container">
  <form id="login-form">
    <input type="text" id="username" placeholder="用户名">
    <input type="password" id="password" placeholder="密码">
    <button type="submit">登录</button>
  </form>
  <div id="welcome-message" style="display:none;">
    欢迎, <span id="display-name"></span>!
  </div>
</div>

JavaScript逻辑

document.getElementById('login-form').addEventListener('submit', function(e) {
  e.preventDefault();

  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  if(username && password) {
    document.getElementById('login-form').style.display = 'none';
    document.getElementById('welcome-message').style.display = 'block';
    document.getElementById('display-name').textContent = username;
  }
});

使用本地存储保存登录状态

为了在页面刷新后保持登录状态，可以使用localStorage：

// 检查是否已登录
if(localStorage.getItem('isLoggedIn')) {
  showWelcomeMessage(localStorage.getItem('username'));
}

document.getElementById('login-form').addEventListener('submit', function(e) {
  e.preventDefault();

  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;

  if(username && password) {
    localStorage.setItem('isLoggedIn', 'true');
    localStorage.setItem('username', username);
    showWelcomeMessage(username);
  }
});

function showWelcomeMessage(username) {
  document.getElementById('login-form').style.display = 'none';
  document.getElementById('welcome-message').style.display = 'block';
  document.getElementById('display-name').textContent = username;
}

添加登出功能

扩展功能添加登出按钮：

<div id="welcome-message" style="display:none;">
  欢迎, <span id="display-name"></span>!
  <button id="logout-btn">登出</button>
</div>

document.getElementById('logout-btn').addEventListener('click', function() {
  localStorage.removeItem('isLoggedIn');
  localStorage.removeItem('username');
  document.getElementById('welcome-message').style.display = 'none';
  document.getElementById('login-form').style.display = 'block';
  document.getElementById('username').value = '';
  document.getElementById('password').value = '';
});

使用CSS增强视觉效果

添加简单的CSS过渡效果：

#login-container {
  transition: all 0.3s ease;
}

#login-form, #welcome-message {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  max-width: 300px;
  margin: 0 auto;
}

表单验证增强

添加基本的表单验证：

document.getElementById('login-form').addEventListener('submit', function(e) {
  e.preventDefault();

  const username = document.getElementById('username').value.trim();
  const password = document.getElementById('password').value.trim();

  if(!username) {
    alert('请输入用户名');
    return;
  }

  if(!password) {
    alert('请输入密码');
    return;
  }

  if(password.length < 6) {
    alert('密码长度不能少于6位');
    return;
  }

  // 验证通过后的逻辑
  localStorage.setItem('isLoggedIn', 'true');
  localStorage.setItem('username', username);
  showWelcomeMessage(username);
});

以上实现提供了基本的登录显示功能，可以根据实际需求进行扩展和完善。

js 实现登录显示