脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 软件编程 → java → Java滑动验证码

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实现滑动验证码(前端部分)的文章就介绍到这了,更多相关Java滑动验证码内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Java Web关键字填空示例详解

    Java Web关键字填空示例详解

    最近在工作中使用了java web，发现有些难度,下面这篇文章主要给大家介绍了关于Java Web关键字填空的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-04-04
  • Java利用反射实现框架类的方法实例

    Java利用反射实现框架类的方法实例

    这篇文章主要给大家介绍了关于Java利用反射实现框架类的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-10-10
  • SpringBoot2底层注解@Import用法详解

    SpringBoot2底层注解@Import用法详解

    这篇文章主要为大家介绍了SpringBoot2底层注解@Import用法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-05-05
  • Java并发编程线程间通讯实现过程详解

    Java并发编程线程间通讯实现过程详解

    这篇文章主要介绍了Java并发编程线程间通讯实现过程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • Java中使用Properties配置文件的简单方法

    Java中使用Properties配置文件的简单方法

    这篇文章主要给大家介绍了关于Java中使用Properties配置文件的简单方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-09-09
  • JavaCV 拉流存储到本地示例解析

    JavaCV 拉流存储到本地示例解析

    这篇文章主要介绍了JavaCV 拉流存储到本地示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • idea导入若依项目教程

    idea导入若依项目教程

    文章介绍了如何在IntelliJ IDEA中导入若依管理系统项目,并详细步骤包括克隆项目、修改配置文件、创建数据库、运行项目和前端展示
    2025-03-03
  • Java集合List相关面试题整理大全

    Java集合List相关面试题整理大全

    这篇文章主要给大家介绍了关于Java集合List相关面试题整理的相关资料,下面将提供一些常见的Java集合类面试题及其解答,帮助读者更好地准备面试,需要的朋友可以参考下
    2024-01-01
  • Kotlin基础教程之面向对象

    Kotlin基础教程之面向对象

    这篇文章主要介绍了Kotlin基础教程之面向对象的相关资料,需要的朋友可以参考下
    2017-05-05
  • MyBatis中高级多表查询(ResultMap、association、collection)详解

    MyBatis中高级多表查询(ResultMap、association、collection)详解

    文章主要介绍了MyBatis中高级多表查询的四种方式：ResultMap、association、collection以及自连接查询,通过定义接口的抽象方法、编写mapper.xml和测试类,详细展示了如何根据复杂数据结构进行数据的装配和查询,感兴趣的朋友一起看看吧
    2024-11-11

最新评论