写博客之后，我一直在想，有什么办法可以增加与读者间的互动？在文章中放置一个精心设计的彩蛋，也许是个不错的主意。

想象一下，在博客文章中故意隐藏一些内容，只有知晓密语的读者，在键盘上敲击字符，才能解开限制，看见被隐藏的信息，那一定会很有趣。就像《阿里巴巴和四十大盗》里，不说出”芝麻开门“的人，就无法找到隐藏的宝藏，不知道密语的人也无法看到被我隐藏的消息。

这个效果不难实现，这篇文章提供了一个简单的方法，只要熟悉一些 JavaScript 知识就能轻松办到。当然，它的效果也是有限的，密语明文嵌入在 JavaScript 代码中，意味着任何人都可以在开发者模式下看见它。

在这篇文章的末尾，我设置了一个小彩蛋，当你在文章页上敲击预设的字符密语”open“时，隐藏的彩蛋就会显示出来。

1. 基础页面结构

首先，先写一个简单的 HTML 页面，其中包含需要隐藏的文字或图片。为了让隐藏内容起效，先通过 CSS 设置其默认隐藏。

一个基本的 HTML 模板 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隐藏内容的网页</title>
    <style>
        /* 默认隐藏 */
        #hidden-content {
            display: none;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网页！</h1>
    <p>试着在键盘上输入“open”看看会发生什么。</p>

    <!-- 隐藏的内容 -->
    <div id="hidden-content">
        <p>你发现了隐藏的彩蛋！🎉</p>
        <img src="secret-image.jpg" alt="隐藏的图片" width="300">
    </div>

    <script src="script.js"></script>
</body>
</html>

在这个模板中，#hidden-content 是想要隐藏的内容，它默认是 display: none 隐藏的。接下来，通过 JavaScript 来监听键盘输入，敲击指定的字符序列时显示隐藏内容。

2. 实现 JavaScript 键盘监听功能

在 JavaScript 中，我们可以通过 keydown 事件来监听用户的每一次键盘输入。设置一个数组来存储用户输入的字符，并且当用户输入的字符序列匹配预设的字符串时，就显示隐藏的内容。

一个简单的 JavaScript 脚本 
// script.js

// 预设的触发密码
const secretCode = 'open';
// 保存用户输入的字符
let userInput = [];

// 监听键盘输入事件
document.addEventListener('keydown', function(event) {
    // 获取用户输入的字符
    userInput.push(event.key);
    
    // 如果输入的字符长度超过密码长度，删除第一个字符保持长度一致
    if (userInput.length > secretCode.length) {
        userInput.shift();
    }

    // 检查输入的字符序列是否与密码匹配
    if (userInput.join('').toLowerCase() === secretCode) {
        // 显示隐藏内容
        document.getElementById('hidden-content').style.display = 'block';
    }
});

这个脚本很简单明了：

  1. secretCode 定义了用户必须输入的密码，也就是 "open"。
  2. userInput 用来存储用户最近输入的字符，并且确保存储的字符数不会超过密码的长度。
  3. 每次用户按下键盘时，事件监听器会捕获该字符并检查它是否与 secretCode 匹配。如果匹配，就会把隐藏的内容显示出来。

3. 完善用户体验

虽然现在已经可以实现基本效果了，但还可以进一步优化。比如，当内容被显示后，就禁用事件监听器，防止效果被用户多次触发。还可以添加一些动画效果，使内容显示得更平滑。

3.1 添加显示动画

通过 CSS 过渡来为隐藏内容的显示添加淡入动画。修改一下 CSS 代码：

#hidden-content {
    display: none;
    opacity: 0;
    transition: opacity 1s ease;
}

#hidden-content.show {
    display: block;
    opacity: 1;
}

接下来，修改 JavaScript 代码，将 display 的控制改为通过添加类名来实现：

document.addEventListener('keydown', function(event) {
    userInput.push(event.key);

    if (userInput.length > secretCode.length) {
        userInput.shift();
    }

    if (userInput.join('').toLowerCase() === secretCode) {
        const hiddenContent = document.getElementById('hidden-content');
        hiddenContent.classList.add('show');

        // 禁用进一步的监听器
        document.removeEventListener('keydown', arguments.callee);
    }
});

3.2 增加彩蛋提示

最后，我希望给读者一些提示，告诉他们即将解锁隐藏内容。在用户快要完成输入时，显示简单的提示信息，增强互动体验。

<p id="hint-message" style="display: none;">接近了！再按一个键试试！</p>

然后在 JavaScript 中，监听用户的输入，如果已经输入了前三个字符，就显示提示信息：

if (userInput.join('').toLowerCase() === secretCode.slice(0, 3)) {
    document.getElementById('hint-message').style.display = 'block';
}

4. 成果

欢迎来到我的网页！

试着在键盘上输入“open”看看会发生什么。

接近了！再按一个键试试！

你发现了隐藏的彩蛋！🎉

隐藏的图片
❤️ 转载文章请注明出处，谢谢！❤️