搜索到
1
篇与
JOE主题验证码
的结果
-
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>最终成品展示：技术有限，做得不好请见谅！
