配合滑块图片验证的JS来了,一行js引入即可实现
介绍
滑块、旋转、点击等图片验证的前端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.js"></script>
使用说明
滑块验证
<script type="text/javascript"> function captcha(){ // 根据 poster 获取验证参数 var res = { title: '', sliderBg: './slider/img/slider.png', sliderKey: '1212', sliderY: 46 }; sliderStart(res, function(sliderKey, sliderX, sliderSuccess, sliderError){ // sliderKey // 验证key // sliderX // 验证x轴距离 // ...调用验证接口 // 模拟调用验证接口 const check = () => { const leeway = 5 // 误差值 const value = 208 // 正确值 if(value >= (sliderX - leeway) && value <= (sliderX + leeway)){ // 成功调用该方法 sliderSuccess() } else { // 错误调用该方法 // 模拟调用获取验证参数接口 getSliderOption(sliderError) } } setTimeout(function(){ check() }, 1000) }, function(refresh){ // 刷新 // ... 需要调用刷新接口 重新获取图片参数 // 模拟调用获取验证参数接口 setTimeout(function(){ getSliderOption(refresh) }, 1000) }) } // 获取验证参数接口 function getSliderOption(callback){ const res = { sliderBg: './slider/img/slider.png', sliderKey: '1212', sliderY: 46 } callback(res) } </script>
本作品采用《CC 协议》,转载必须注明作者和本文链接
推荐文章: