配合滑块图片验证的JS来了，一行js引入即可实现

kkokk 的个人博客 / 3 / 7 / 创建于 2年前 / 更新于 2年前

介绍

滑块、旋转、点击等图片验证的前端js，引入一行js即可方便快捷使用
后端api请阅读博客滑块验证图片
 点击链接加入群聊【海报图片验证交流群】

仓库地址

觉得不错的话，点个星星，谢谢大家

演示

滑块前端演示 kkokk.github.io/captcha/

安装教程

直接引入js

<!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <title>图片验证DEMO</title>
     </head>
     <body>
         <button type="button" onclick="captcha()">
             验证
         </button>
     </body>
 </html>
 <script type="text/javascript" src="./slider/slider-min.js"></script>

使用说明

滑块验证

<script type="text/javascript">
 // 开始验证
 function captcha(){
     // 根据 poster 获取验证参数
     Slider = new langSlider({
         title: '滑块安全验证', 
         start: function(Slider) {
             setTimeout(function(){
                 Slider.sliderStart({
                     sliderBg: './slider/img/slider.png', 
                     sliderKey: '1212', 
                     sliderY: 46
                 })
             }, 1000);
         },
         check: function(sliderKey, sliderX, Slider) {

             // 模拟调用验证接口
             const check = () => {
                 const leeway = 5 // 误差值
                 const value = 208 // 正确值
                 if(value >= (sliderX - leeway) && value <= (sliderX + leeway)){
                     // 成功调用该方法
                     Slider.sliderSuccess()
                 } else {
                     // 错误调用该方法
                     // 模拟调用获取验证参数接口
                     setTimeout(function(){
                         Slider.sliderError({
                             sliderBg: './slider/img/slider.png', 
                             sliderKey: '1212', 
                             sliderY: 46
                         })
                     }, 1000);
                 }
             }

             setTimeout(function(){
                 check()
             }, 1000)

         },
         refresh: function(Slider){
             setTimeout(function(){
                 Slider.sliderRefresh({
                     sliderBg: './slider/img/slider.png', 
                     sliderKey: '1212', 
                     sliderY: 46
                 })
             }, 1000);
         },
     })
 }
</script>

本作品采用《CC 协议》，转载必须注明作者和本文链接

327 声望

暂无个人描述~

《L03 构架 API 服务器》

你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程，JWT 概念及使用和 API 开发相关的进阶知识。

《L01 基础入门》

我们将带你从零开发一个项目并部署到线上，本课程教授 Web 开发中专业、实用的技能，如 Git 工作流、Laravel Mix 前端工作流等。

推荐文章：

更多推荐...

用 Laravel12 Startkit 做了一个 composer 私有包托管平台 😂 点赞超过 20 个开源，看看需要的人多不多 28 / 19 |

如何打造令后端面试官印象深刻的简历？ 16 / 10 |

花了四个月打磨的 Laravel Plus 开源 31 / 98 |

冯老师的困惑 —— 一个跑了两年的 BUG 21 / 17 |

在laravel下实现全双工的websocket开发 21 / 8 |

无需修改任何代码和扩展将你的Laravel项目性能提高20倍 101 / 100 |

讨论数量: 7

甜筒君

课程读者 48 声望

不错，先试试看

2年前评论

PHP-Coder

课程读者 53 声望

:+1:

2年前评论

铁牛

26 声望

file 验证不了

2年前评论

kkokk （楼主）

demo验证结果随机的，这里没做验证

kkokk （楼主）

我改一下，改成可验证的

ntdgg

课程读者 56 声望 / CEO @ 流之云科技

:+1: 这么优秀的，我还是第一次见

2年前评论

kkokk （楼主）

😁😁

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

未填写

私信

文章归档

2 篇 2023 年 12 月 1 篇 2023 年 3 月 1 篇 2023 年 1 月 3 篇 2022 年 12 月 1 篇 2022 年 5 月 2 篇 2021 年 10 月

1年前行为验证组件，旋转图片验证 1年前行为验证组件，滑块拼图验证 2年前海报生成接入了拓展 Imagick 效率提升一大截 2年前配合滑块图片验证的JS来了，一行js引入即可实现 2年前点击验证图片

67 基于 GD 、Imagick 和 phpqrcode 的海报生成插件 20 滑块验证图片 9 PHP海报 9 旋转图片验证 8 配合滑块图片验证的JS来了，一行js引入即可实现

博客标签

多用户登录

成为赞助商