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

介绍

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

仓库地址

gitee
github

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

演示

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

安装教程

  1. 直接引入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>

使用说明

  1. 滑块验证

    <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 协议》,转载必须注明作者和本文链接
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 7

file 验证不了

1年前 评论
kkokk (楼主) 1年前
kkokk (楼主) 1年前
ntdgg

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

1年前 评论
kkokk (楼主) 1年前

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