中国红客联盟国际站联盟介绍联盟架构联盟章程发展历程联盟邮箱积分VIP捐助联盟收藏本站
请登录
立即注册
门户首页
交流社区BBS
技术圈子Group
关于我们
红客大事记
插件Plugin
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程脚本交流 › Java实现滑动验证码(前端部分)

[JAVA] Java实现滑动验证码(前端部分)

1727 0
Honkers 2022-11-9 09:11:47 | 显示全部楼层 |阅读模式
目录

    实现思路实现代码实现结果


实现思路

1、请求后端获得背景图、滑块、x、y、误差范围bound
2、将滑块设置到对应的位置：top = y
3、添加鼠标滑动事件

实现代码

后端请求（Controller）
SliderVerifyController
  1. /**
  2. * @author: Yang
  3. * @create: 2022-10-25
  4. * @Description: 滑动验证
  5. */
  6. @RestController
  7. @RequestMapping("/sliderVerify")
  8. public class SliderVerifyController {
  9.     @Resource
  10.     private SliderVerifyService sliderVerifyService;
  12.     @GetMapping
  13.     public ResponseResult generateSliderVerify() {
  15.         return sliderVerifyService.generateSliderVerify();
  16.     }
  17. }
复制代码
SliderVerifyServiceImpl
  1. /**
  2. * @author: Yang
  3. * @create: 2022-10-25
  4. * @Description:
  5. */
  6. @Service
  7. public class SliderVerifyServiceImpl implements SliderVerifyService {
  9.     @Value("${my.staticPath}")
  10.     private String path;
  11.     @Override
  12.     public ResponseResult generateSliderVerify() {
  13.         int index = new Random().nextInt(5) + 1;
  15.         ImageSlideVerify slideVerify = ImageSlideVerifyUtil.cutting(
  16.                 new File(System.getProperty("user.dir") + "/web_component/src/main/resources/static/sliderVerify/" + index + ".png"));
  17.         return new ResponseResult<>(200, slideVerify);
  18.     }
  19. }
复制代码
HTML代码
  1. <!DOCTYPE html>
  2. <html lang="zh">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>滑动验证码</title>
  8. </head>
  9. <body>
  10.         <div id="box">
  11.                 <div id="content">
  12.                         <img id="bg" src="bg.png" />
  13.                         <img id="block" src="b.png"/>
  14.                 </div>
  15.                 <!-- 滑块 -->
  16.                 <div id="slider">
  17.                         <div id="slider-block">
  19.                         </div>
  20.                 </div>
  21.         </div>
  22. </body>
  23. <script>
  24.         let blockImg = document.querySelector("#block");// 滑块
  25.         let bgImg = document.querySelector("#bg");// 背景
  26.         let sliderBlock = document.querySelector("#slider-block");// 滑动栏的滑块
  27.         function sliderVerify(callback){
  28.                 // 获取验证码信息
  29.                 const xhr = new XMLHttpRequest();
  30.                 xhr.open("get", "http://localhost:8080/sliderVerify", true);
  31.                 xhr.send();
  32.                 xhr.onreadystatechange = function(){
  33.                         if(this.readyState == 4 && this.status == 200){
  34.                                 let data = JSON.parse(this.response).data;
  35.                                 blockImg.src = data.blockImg;
  36.                                 bgImg.src = data.bgImg;
  37.                                 blockImg.style.top = data.y + 80 + "px";
  38.                                 callback && callback(data); // 回调函数
  39.                         }
  40.                 }
  41.         }
  42.         // 执行
  43.         sliderVerify(function (data) {
  44.                 // 添加鼠标事件
  45.                 sliderBlock.addEventListener("mousedown", (e1) => {
  46.                         const x = e1.x;
  47.                         window.onmousemove = function(e) {
  48.                                 let left = e.x - x;
  49.                                 // 设置边界，因为我的图片大小都是固定425，所以我直接固定
  50.                                 if(e1.target.offsetLeft >= 425){
  51.                                         sliderBlock.style.left = 425 + "px";
  52.                                         blockImg.style.left = 425 - 20 + "px";
  53.                                         return;
  54.                                 }
  55.                                 // 移动
  56.                                 sliderBlock.style.left = left + "px";
  57.                                 blockImg.style.left = left - 20 + "px";
  58.                         }
  59.                         // 鼠标释放
  60.                         window.onmouseup = function(e){
  61.                                 // 获取滑动到的位置
  62.                                 let left = sliderBlock.style.left.split("px")[0];
  63.                                 // 减去80内边距并转成数字
  64.                                 left = Number(left) - 80;
  65.                                 // 清空鼠标滑动事件
  66.                                 window.onmousemove = null;
  67.                                 // 回到初始位置
  68.                                 sliderBlock.style.left = 0 + "px";
  69.                                 blockImg.style.left = 0 - 20 + "px";
  70.                                 // 判断是否在范围内
  71.                                 if(left >= data.x - data.bound && left <= data.x + data.bound){
  72.                                         alert("验证成功");
  73.                                 } else {
  74.                                         alert("验证错误")
  75.                                         window.location.reload()
  76.                                 }
  77.                         }
  78.                 })
  79.         });
  80. </script>
  81. <style>
  82.         #content{
  83.                 user-select: none;
  84.                 position: relative;
  85.                 padding: 80px;
  86.                 padding-bottom: 0;
  87.         }
  88.         #block{
  89.                 position: absolute;
  90.                 /* top: 169px; */
  91.                 left: -20px;
  92.         }
  93.         #slider{
  94.                 position: relative;
  95.                 display: flex;
  96.                 align-items: center;
  97.                 box-sizing: border-box;
  98.                 width: 505px;
  99.                 height: 50px;
  100.                 padding: 0 2px;
  101.                 border: 3px groove ;
  102.         }
  103.         #slider-block{
  104.                 position: relative;
  105.                 width: 70px;
  106.                 height: 40px;
  107.                 background-color: antiquewhite;
  108.         }
  109. </style>
  110. </html>
复制代码
实现结果



Java后端代码
到此这篇关于Java实现滑动验证码(前端部分)的文章就介绍到这了,更多相关Java滑动验证码内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章希望大家以后多多支持中国红客联盟！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Honkers

荣誉红客

关注
  • 4004
    主题
  • 36
    粉丝
  • 0
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天