返回列表 发布新帖
查看: 465|回复: 2

求类似CF人机认证的源码

发表于 2024-10-14 11:25:57 | 查看全部 |阅读模式

注册账号,享受无广告的清爽界面!

您需要 登录 才可以下载或查看,没有账号?注册

×
各位大佬,我目前不想套CF,但是想在自己文章页前面加个类似“我不是机器人”的按钮,点击按钮后才会加载显示文章,请问要如何增加?
爱生活,爱奶昔~
发表于 2024-10-14 11:37:08 | 查看全部
  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隐藏。

爱生活,爱奶昔~
回复 支持 反对

使用道具 举报

 楼主| 发表于 2024-10-15 17:02:05 | 查看全部
Alvis 发表于 2024-10-14 11:37
[md]
1. **创建HTML结构**
   在文章页面的顶部,添加一个简单的按钮。

非常感谢,我试试看
爱生活,爱奶昔~
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

投诉/建议联系

@naixinet

未经授权禁止转载,复制和建立镜像,
如有违反,追究法律责任!
  • 关注公众号
  • 添加微信客服
Copyright © 2025 Nyarime. 沪ICP备13020230号-1|沪公网安备 31010702007642号
关灯 在本版发帖
扫一扫添加微信客服
返回顶部
快速回复 返回顶部 返回列表