求类似CF人机认证的源码

1. 创建HTML结构
   在文章页面的顶部，添加一个简单的按钮。

   htmlCopy code<div id="article-content" style="display: none;">
      <!-- 这是你文章的内容 -->
      <h1>文章标题</h1>
      <p>这里是你的文章内容。</p>
   </div>
   
   <div id="robot-check">
      <button id="show-content-btn">我不是机器人</button>
   </div>

   • article-content 是包含文章内容的 div，初始状态下被隐藏 (display: none;)。
   • robot-check 包含一个按钮，用户点击后会显示文章内容。

2. 添加JavaScript逻辑
   使用JavaScript来处理按钮点击事件，在点击后显示隐藏的内容。

   javascriptCopy codedocument.getElementById('show-content-btn').addEventListener('click', function() {
      // 隐藏“我不是机器人”按钮
      document.getElementById('robot-check').style.display = 'none';
      // 显示文章内容
      document.getElementById('article-content').style.display = 'block';
   });

   • addEventListener 用于监听按钮的点击事件，当点击时，会隐藏按钮并显示文章内容。

3. （可选）美化CSS
   你可以通过CSS进一步美化按钮和隐藏的文章内容。

   cssCopy code#robot-check {
      text-align: center;
      margin: 50px 0;
   }
   
   #show-content-btn {
      background-color: #4CAF50;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      font-size: 16px;
   }
   
   #show-content-btn:hover {
      background-color: #45a049;
   }

4. 测试页面
   保存并刷新页面，确保在用户点击按钮前，文章内容不会显示，点击按钮后文章才会加载。

这种方法不涉及复杂的后台逻辑，并且不会影响SEO，因为文章内容依然是HTML静态内容，只是初始时通过CSS隐藏。