Java实现滑动验证码(前端部分)
更新时间：2022年10月27日 14:53:08 作者：weixin_52707625
这篇文章主要为大家介绍了如何用Java语言实现滑动验证码的生成(前端部分)，文中的示例代码讲解详细，具有一定的学习价值，感兴趣的小伙伴可以跟随小编学习一下
实现思路
1、请求后端获得背景图、滑块、x、y、误差范围bound
2、将滑块设置到对应的位置：top = y
3、添加鼠标滑动事件
实现代码
后端请求（Controller）
SliderVerifyController
/**
* @author: Yang
* @create: 2022-10-25
* @Description: 滑动验证
*/
@RestController
@RequestMapping("/sliderVerify")
public class SliderVerifyController {
@Resource
private SliderVerifyService sliderVerifyService;
@GetMapping
public ResponseResult generateSliderVerify() {
return sliderVerifyService.generateSliderVerify();
}
}
SliderVerifyServiceImpl
/**
* @author: Yang
* @create: 2022-10-25
* @Description:
*/
@Service
public class SliderVerifyServiceImpl implements SliderVerifyService {
@Value("${my.staticPath}")
private String path;
@Override
public ResponseResult generateSliderVerify() {
int index = new Random().nextInt(5) + 1;
ImageSlideVerify slideVerify = ImageSlideVerifyUtil.cutting(
new File(System.getProperty("user.dir") + "/web_component/src/main/resources/static/sliderVerify/" + index + ".png"));
return new ResponseResult<>(200, slideVerify);
}
}
HTML代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>滑动验证码</title>
</head>
<body>
<div id="box">
<div id="content">
<img id="bg" src="bg.png" />
<img id="block" src="b.png"/>
</div>
<!-- 滑块 -->
<div id="slider">
<div id="slider-block">
</div>
</div>
</div>
</body>
<script>
let blockImg = document.querySelector("#block");// 滑块
let bgImg = document.querySelector("#bg");// 背景
let sliderBlock = document.querySelector("#slider-block");// 滑动栏的滑块
function sliderVerify(callback){
// 获取验证码信息
const xhr = new XMLHttpRequest();
xhr.open("get", "http://localhost:8080/sliderVerify", true);
xhr.send();
xhr.onreadystatechange = function(){
if(this.readyState == 4 && this.status == 200){
let data = JSON.parse(this.response).data;
blockImg.src = data.blockImg;
bgImg.src = data.bgImg;
blockImg.style.top = data.y + 80 + "px";
callback && callback(data); // 回调函数
}
}
}
// 执行
sliderVerify(function (data) {
// 添加鼠标事件
sliderBlock.addEventListener("mousedown", (e1) => {
const x = e1.x;
window.onmousemove = function(e) {
let left = e.x - x;
// 设置边界，因为我的图片大小都是固定425，所以我直接固定
if(e1.target.offsetLeft >= 425){
sliderBlock.style.left = 425 + "px";
blockImg.style.left = 425 - 20 + "px";
return;
}
// 移动
sliderBlock.style.left = left + "px";
blockImg.style.left = left - 20 + "px";
}
// 鼠标释放
window.onmouseup = function(e){
// 获取滑动到的位置
let left = sliderBlock.style.left.split("px")[0];
// 减去80内边距并转成数字
left = Number(left) - 80;
// 清空鼠标滑动事件
window.onmousemove = null;
// 回到初始位置
sliderBlock.style.left = 0 + "px";
blockImg.style.left = 0 - 20 + "px";
// 判断是否在范围内
if(left >= data.x - data.bound && left <= data.x + data.bound){
alert("验证成功");
} else {
alert("验证错误")
window.location.reload()
}
}
})
});
</script>
<style>
#content{
user-select: none;
position: relative;
padding: 80px;
padding-bottom: 0;
}
#block{
position: absolute;
/* top: 169px; */
left: -20px;
}
#slider{
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
width: 505px;
height: 50px;
padding: 0 2px;
border: 3px groove ;
}
#slider-block{
position: relative;
width: 70px;
height: 40px;
background-color: antiquewhite;
}
</style>
</html>
实现结果
到此这篇关于Java实现滑动验证码(前端部分)的文章就介绍到这了,更多相关Java滑动验证码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
该教程使用idea开发工具初始化javaweb项目，该运行在tomcat服务器上通过配置项目环境变量保证tomcat正常启动，具体操作配置教程参考下本文2021-06-06
这篇文章主要介绍了Java编程Webservice指定超时时间代码详解，简单介绍了webservice，然后分享了通过使用JDK对Webservice的支持进行Webservice调用实现指定超时时间完整示例，具有一定借鉴价值，需要的朋友可以参考下。2017-11-11
这篇文章主要介绍了详解jeefast和Mybatis实现二级联动的问题,本文通过图文实例相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
这篇文章主要介绍了IDEA Maven 配置备忘笔记，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
下面小编就为大家带来一篇Java基础的几道练习题(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望可以帮到你2021-08-08
Java Comparable和Comparator对比详解
这篇文章主要介绍了Java Comparable和Comparator对比详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-11-11
在本篇文章里小编给大家整理的是关于java邮件乱码的彻底解决方案，需要的朋友们可以学习下。2019-12-12
这篇文章主要介绍了Java实现消息轰炸的方法 附带源码,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要介绍了java正则表达式处理花括号内容替换赋值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
本文旨在简单的介绍一下如何让java层和C/C++层相互调用，这里主要是使用了JNI技术，并没有深究其原理，只是做了个实现，其目的是为后面的学习打开一扇窗。2016-01-01
最新评论