JavaScript弹窗登录页实现及登录尝试Cookie记录求助

一、修复弹窗异常（仅弹窗不新开标签） #

问题通常出在按钮默认行为未阻止或window.open参数配置错误，以下是最简实现方案：

<!-- 首页登录按钮 -->
<button id="loginBtn">打开登录弹窗</button>

<script>
document.getElementById('loginBtn').addEventListener('click', function(e) {
  // 强制阻止默认跳转行为（避免误触新开标签）
  e.preventDefault();
  // 打开固定尺寸弹窗，命名为LoginPopup避免重复弹窗
  const loginPopup = window.open('', 'LoginPopup', 'width=400,height=500,top=150,left=200,noopener');
  
  // 直接向弹窗写入登录表单（无需额外HTML文件，适合新手测试）
  loginPopup.document.write(`
    <!DOCTYPE html>
    <html>
    <head>
      <title>登录</title>
      <style>
        body { padding: 2rem; font-family: sans-serif; }
        .form-group { margin-bottom: 1rem; }
        input { width: 100%; padding: 0.5rem; box-sizing: border-box; }
        button { width: 100%; padding: 0.6rem; background: #2563eb; color: white; border: none; cursor: pointer; }
        .error { color: red; margin-top: 1rem; display: none; }
      </style>
    </head>
    <body>
      <h3>用户登录</h3>
      <form id="loginForm">
        <div class="form-group">
          <input type="text" id="username" placeholder="用户名" required>
        </div>
        <div class="form-group">
          <input type="password" id="password" placeholder="密码" required>
        </div>
        <button type="submit">登录</button>
        <p class="error" id="errorTip"></p>
      </form>
      <script>
        // 弹窗内表单提交逻辑
        document.getElementById('loginForm').addEventListener('submit', function(e) {
          e.preventDefault();
          const username = document.getElementById('username').value;
          const password = document.getElementById('password').value;
          
          // 模拟登录验证（实际项目替换为接口请求）
          if (username === 'demo' && password === 'demo123') {
            // 通知原窗口跳转至成功页
            window.opener.location.href = \`success.html?user=\${username}\`;
            // 关闭弹窗
            window.close();
          } else {
            // 登录失败，调用原窗口的次数更新方法
            window.opener.addLoginAttempt();
            document.getElementById('errorTip').style.display = 'block';
            document.getElementById('errorTip').textContent = '用户名或密码错误';
          }
        });
      </script>
    </body>
    </html>
  `);
});
</script>

二、实现Cookie登录尝试次数记录（5分钟有效期） #

在首页的<script>中添加以下Cookie操作方法：

// 增加登录尝试次数
function addLoginAttempt() {
  let attempts = getCurrentAttempts();
  attempts += 1;
  
  // 设置Cookie有效期为5分钟（300秒）
  const expireTime = new Date();
  expireTime.setTime(expireTime.getTime() + 300 * 1000);
  document.cookie = `loginAttempts=${attempts}; expires=${expireTime.toUTCString()}; path=/`;
  
  // 超过3次尝试则禁用登录按钮
  if (attempts >= 3) {
    alert('登录尝试次数过多，请5分钟后重试');
    document.getElementById('loginBtn').disabled = true;
    // 5分钟后重置状态
    setTimeout(() => {
      document.getElementById('loginBtn').disabled = false;
      // 清除次数Cookie
      document.cookie = `loginAttempts=0; expires=${new Date(0).toUTCString()}; path=/`;
    }, 300 * 1000);
  }
}

// 获取当前登录尝试次数
function getCurrentAttempts() {
  const cookieList = document.cookie.split('; ');
  for (let cookie of cookieList) {
    const [key, value] = cookie.split('=');
    if (key === 'loginAttempts') return parseInt(value);
  }
  return 0;
}

// 页面加载时检查是否处于限制期
window.onload = function() {
  const attempts = getCurrentAttempts();
  if (attempts >= 3) {
    document.getElementById('loginBtn').disabled = true;
    setTimeout(() => {
      document.getElementById('loginBtn').disabled = false;
      document.cookie = `loginAttempts=0; expires=${new Date(0).toUTCString()}; path=/`;
    }, 300 * 1000);
  }
}

三、登录成功页跳转逻辑 #

创建success.html页面，获取并展示用户名：

<!DOCTYPE html>
<html>
<head>
  <title>登录成功</title>
</head>
<body>
  <h1>欢迎回来，<span id="userName"></span>！</h1>
  <script>
    // 从URL参数中提取用户名
    const urlParams = new URLSearchParams(window.location.search);
    const userName = urlParams.get('user');
    document.getElementById('userName').textContent = userName;
  </script>
</body>
</html>

新手注意事项 #

• 浏览器默认会拦截弹窗，测试时需将当前站点加入弹窗白名单；
• 本地file://协议下Cookie可能不生效，建议用VSCode的Live Server插件启动本地服务器测试；
• 若使用<a>标签作为登录按钮，必须在点击事件中添加e.preventDefault()阻止默认跳转。

内容的提问来源于stack exchange，提问作者Zachary Padgett