求类似CF人机认证的源码
各位大佬，我目前不想套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隐藏。 Alvis 发表于 2024-10-14 11:37
1. **创建HTML结构**
在文章页面的顶部，添加一个简单的按钮。
非常感谢，我试试看
页:
[1]