如何实现输入账号密码显示隐藏内容的网站彩蛋？含HTML表单疑问

嘿，我刚好做过类似的趣味彩蛋功能，给你一套完整的实现方案，一步步来很简单～

第一步：搭建HTML结构 #

首先我们需要一个包含账号、密码输入框的表单，再加上要隐藏的彩蛋内容（初始状态设为不可见）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>趣味网站彩蛋</title>
    <style>
        /* 初始隐藏彩蛋内容 */
        #secret-content {
            display: none;
            margin-top: 20px;
            padding: 20px;
            background: #f0f8ff;
            border-radius: 8px;
        }
        .error-tip {
            color: red;
            margin-top: 10px;
            display: none;
        }
    </style>
</head>
<body>
    <h2>解锁隐藏彩蛋</h2>
    <form id="egg-form">
        <div>
            <label for="username">账号：</label>
            <input type="text" id="username" placeholder="输入秘密账号">
        </div>
        <div style="margin-top: 10px;">
            <label for="password">密码：</label>
            <input type="password" id="password" placeholder="输入秘密密码">
        </div>
        <button type="submit" style="margin-top: 10px;">解锁彩蛋</button>
    </form>
    <div class="error-tip" id="error-tip">账号或密码错误哦😯</div>
    <!-- 隐藏的彩蛋内容 -->
    <div id="secret-content">
        <h3>🎉恭喜解锁隐藏页面！</h3>
        <p>这里是只有少数人能看到的秘密内容～</p>
    </div>

    <script>
        // 这里写JavaScript逻辑
    </script>
</body>
</html>

第二步：添加JavaScript验证逻辑 #

接下来我们要实现账号密码的双重匹配验证，只有当两者都正确时，才显示隐藏的彩蛋内容：

// 获取页面元素
const form = document.getElementById('egg-form');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const secretContent = document.getElementById('secret-content');
const errorTip = document.getElementById('error-tip');

// 预设正确的账号和密码（你可以改成自己的）
const CORRECT_USERNAME = "fun_egg_user";
const CORRECT_PASSWORD = "hiddensecret2024";

// 监听表单提交事件
form.addEventListener('submit', function(e) {
    // 阻止表单默认的刷新提交行为
    e.preventDefault();

    // 获取用户输入的账号和密码
    const inputUsername = usernameInput.value.trim();
    const inputPassword = passwordInput.value.trim();

    // 双重匹配验证
    if (inputUsername === CORRECT_USERNAME && inputPassword === CORRECT_PASSWORD) {
        // 验证通过：显示彩蛋内容，隐藏错误提示
        secretContent.style.display = 'block';
        errorTip.style.display = 'none';
        // 可选：清空输入框
        usernameInput.value = '';
        passwordInput.value = '';
    } else {
        // 验证失败：显示错误提示，隐藏彩蛋内容
        errorTip.style.display = 'block';
        secretContent.style.display = 'none';
    }
});

关键细节说明 #

• 隐藏元素的初始状态：通过CSS的display: none让彩蛋内容一开始不显示，验证通过后再改成block显示。
• 阻止默认提交：如果不写e.preventDefault()，表单提交后会刷新页面，之前的验证状态就没了，所以一定要加这个。
• 双重验证逻辑：用&&同时判断账号和密码是否都匹配预设值，只有两者都正确才触发彩蛋。
• 趣味提示：加个错误提示框能提升用户体验，让用户知道输入错了，而不是毫无反应。

注意：这个方案是前端验证，适合趣味彩蛋场景，但不能用于需要真实安全的登录功能（因为别人可以通过查看源码找到预设的账号密码），不过你的需求是趣味网站彩蛋，完全没问题～

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