实现思路
1、请求后端获得背景图、滑块、x、y、误差范围bound
2、将滑块设置到对应的位置：top = y
3、添加鼠标滑动事件
实现代码
后端请求（Controller）
SliderVerifyController
@RestController
@RequestMapping("/sliderVerify")
public class SliderVerifyController {
@Resource
private SliderVerifyService sliderVerifyService;
@GetMapping
public ResponseResult generateSliderVerify() {
return sliderVerifyService.generateSliderVerify();
}
}
SliderVerifyServiceImpl
@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;
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实现滑动验证码(前端部分)的文章就介绍到这了,更多相关Java滑动验证码内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
