首页
许愿池
友情链接
承接业务
留言板
摄影作品
访客统计
软件下载
WIN软件
MAC软件
关于站长
Search
1
服务器被植入流量劫持后门(跳转世界杯赌球网站)的排查与解决方案
256 阅读
2
飞牛圣体-网心云OES一代安装ARM版FnOS全过程
184 阅读
3
移动光猫吉比特GM232改桥接+开启IPV6+开启Telnet方法
160 阅读
4
2023 玩客云root以及绝育教程 1.3版本
140 阅读
5
飞牛系统(FnOS)挂载SMB目录并设置开机自启
100 阅读
人物
动物
风景
数码
网络
硬件
系统
建站
软件
MacOS
Windows
NAS
docker
esxi
AI
情感
登录
/
注册
Search
标签搜索
mac mini
DSM7
宝塔面板
apple
黑苹果
EOS R6
映泰
验证码
m4
photoshop
云层
风景
摄影
人像
儿童
刀马旦
艺术
万泰
吉比特
服务器安全运维
RongYan
累计撰写
63
篇文章
累计收到
170
条评论
今日撰写
0
篇文章
首页
栏目
人物
动物
风景
数码
网络
硬件
系统
建站
软件
MacOS
Windows
NAS
docker
esxi
AI
情感
页面
许愿池
友情链接
承接业务
留言板
摄影作品
访客统计
软件下载
WIN软件
MAC软件
关于站长
用户登录
登录
注册
搜索到
1
篇与
计算式验证码
的结果
2026-03-29
Typecho Joe主题增加简单的计算式验证码
序言之前我写过这么一篇文章: Typecho上Joe主题安装XCaptcha验证码防止垃圾评论 当时测试的时候是没有问题的,这东西因为都是靠云端验证的,需要服务商的API key。我用的是cf验证,只知道因为CF漂洋过海在我们中国大陆可能速度上不是很理想,其实也想找其它的替代的,耐何没找到中意的,就一直没管它。 直到今天有位老铁私下找我,说不能评论了,我测试了一下确实不行。不知道后来被我改了哪里,没办法提交评论。至于什么时候失效的,我也不知道了。 索性不管它了,决定手搓一个更简单的。一、目标宗旨是越简单越好,只要在提交评论前增加一个100以内的加减法即可,所以呢就需要做到修改的文件越少、修改的地方越少越好。最终经过实验,只需要改动一个文件的代码即可完美实现。二、方法1、第一段代码:编写验证码盒子: 打开/joe/public/comment.php定位到发送评论按钮这段代码:<div class="foot"> <div class="owo joe_owo__contain"></div> <div class="submit"> <span class="cancle joe_comment__cancle">取消</span> <button type="submit">发送评论</button>在<div class="owo joe_owo__contain"></div>和<div class="submit">中间也就是第2行和第3行之间插入验证码代码,最终代码如下:回复可见隐藏内容,请前往内页查看详情这里我分段解释一下代码的意思:<!-- 这是最外层的大盒子,负责把验证码 居中显示 --> <div style="margin: 10px 0; <!-- 上下留10px空隙,美观 --> text-align: center; <!-- 让里面的内容 水平居中 --> width: 100%;" <!-- 宽度占满整行,才能居中 --> id="verify_box" <!-- 给这个盒子一个名字,方便JS控制 --> ><!-- 这是内层小盒子,负责把 题目 + 输入框 排在同一行 --> <div style="display: inline-flex; <!-- 让内容横向排列(题目+输入框并排) --> align-items: center; <!-- 垂直居中对齐,看起来整齐 --> gap: 8px;" <!-- 题目和输入框之间留8px空隙 --> ><!-- 这是显示计算题目的文字,比如 15 + 23 = ? --> <span id="code_text" style="font-size:14px; <!-- 文字大小14px --> color: #00D800 !important; <!-- 文字颜色:绿色 --> font-weight: bold;" <!-- 文字加粗 --> ></span><!-- 这是你用来输入答案的输入框 --> <input type="text" <!-- 普通文本输入框 --> id="code_input" <!-- 给输入框取名 --> name="verify_code" <!-- 提交时用的名字 --> placeholder="输入答案" <!-- 没输入时显示的灰色提示文字 --> style="background:transparent !important; <!-- 背景:透明 --> color: #00D800 !important; <!-- 输入的文字:绿色 --> font-weight: bold; <!-- 输入的文字:加粗 --> padding:5px 8px; <!-- 内边距,让框变大好点 --> border:1px solid #ddd; <!-- 边框:灰色细线 --> border-radius:4px; <!-- 边框圆角,更美观 --> width:70px;" <!-- 输入框宽度 --> ><!-- 隐藏的输入框,不用管,后台验证用的 --> <input type="hidden" id="code_answer" name="verify_answer">2、对验证码盒子进行控制:在文件结尾直接添加如下代码即可:回复可见:隐藏内容,请前往内页查看详情再分段解释一下代码的意思:$(function() { // 验证码JS function refreshCode() { let num1 = Math.floor(Math.random()*41)+10; // 生成50以内的随机数 let num2 = Math.floor(Math.random()*41)+10; // 第二个50以内的随机数 // 注:如果你想把两个数改为10以内的个位数,则上面两个变量*41)+10改为*9)+1即可。 window.answer = num1 + num2; // 把两个数相加 $("#code_text").text(num1 + " + " + num2 + " = ?"); $("#code_input").val(''); }<div style=' position:fixed; /* 这个最关键:让提示框 固定在屏幕上,不随滚动条移动 */ top:50%; /* 距离屏幕顶部 50% → 垂直方向中间 */ left:50%; /* 距离屏幕左边 50% → 水平方向中间 */ transform:translate(-50%,-50%); /* 让提示框自身真正居中,不偏移 */ background:#222; /* 背景颜色:深灰色 */ color:#fff; /* 文字颜色:白色 */ padding:15px 25px; /* 内边距:让文字和边框之间有空隙,看起来不拥挤 */ border-radius:4px; /* 圆角:让提示框四角变圆,更好看 */ z-index:9999; /* 层级最高:确保提示框在最上面,不被其他内容挡住 */ ' > 请输入正确的答案! <!-- 提示框里显示的文字 --> </div>最终成品展示:技术有限,做得不好请见谅!
2026年03月29日
26 阅读
2 评论
0 点赞