欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Java實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼(前端部分)

 更新時(shí)間:2022年10月27日 14:53:08   作者:weixin_52707625  
這篇文章主要為大家介紹了如何用Java語言實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼的生成(前端部分),文中的示例代碼講解詳細(xì),具有一定的學(xué)習(xí)價(jià)值,感興趣的小伙伴可以跟隨小編學(xué)習(xí)一下

實(shí)現(xiàn)思路

1、請(qǐng)求后端獲得背景圖、滑塊、x、y、誤差范圍bound

2、將滑塊設(shè)置到對(duì)應(yīng)的位置:top = y

3、添加鼠標(biāo)滑動(dòng)事件

實(shí)現(xiàn)代碼

后端請(qǐng)求(Controller)

SliderVerifyController

/**
 * @author: Yang
 * @create: 2022-10-25
 * @Description: 滑動(dòng)驗(yàn)證
 */
@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>滑動(dòng)驗(yàn)證碼</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");// 滑動(dòng)欄的滑塊
	function sliderVerify(callback){
		// 獲取驗(yàn)證碼信息
		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); // 回調(diào)函數(shù)
			}
		}
	}
	// 執(zhí)行
	sliderVerify(function (data) {
		// 添加鼠標(biāo)事件
		sliderBlock.addEventListener("mousedown", (e1) => {
			const x = e1.x;
			window.onmousemove = function(e) {
				let left = e.x - x;
				// 設(shè)置邊界,因?yàn)槲业膱D片大小都是固定425,所以我直接固定
				if(e1.target.offsetLeft >= 425){
					sliderBlock.style.left = 425 + "px";
					blockImg.style.left = 425 - 20 + "px";
					return;
				}
				// 移動(dòng)
				sliderBlock.style.left = left + "px";
				blockImg.style.left = left - 20 + "px";
			}
			// 鼠標(biāo)釋放
			window.onmouseup = function(e){
				// 獲取滑動(dòng)到的位置
				let left = sliderBlock.style.left.split("px")[0];
				// 減去80內(nèi)邊距并轉(zhuǎn)成數(shù)字
				left = Number(left) - 80;
				// 清空鼠標(biāo)滑動(dòng)事件
				window.onmousemove = null;
				// 回到初始位置
				sliderBlock.style.left = 0 + "px";
				blockImg.style.left = 0 - 20 + "px";
				// 判斷是否在范圍內(nèi)
				if(left >= data.x - data.bound && left <= data.x + data.bound){
					alert("驗(yàn)證成功");
				} else {
					alert("驗(yàn)證錯(cuò)誤")
					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>

實(shí)現(xiàn)結(jié)果

Java后端代碼

到此這篇關(guān)于Java實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼(前端部分)的文章就介紹到這了,更多相關(guān)Java滑動(dòng)驗(yàn)證碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 解決IDEA修改 .vmoptions 文件后導(dǎo)致無法啟動(dòng)的問題

    解決IDEA修改 .vmoptions 文件后導(dǎo)致無法啟動(dòng)的問題

    這篇文章主要介紹了解決IDEA修改 .vmoptions 文件后導(dǎo)致無法啟動(dòng)的問題,需要的朋友可以參考下
    2020-12-12
  • Java實(shí)現(xiàn)用Mysql存取圖片操作實(shí)例

    Java實(shí)現(xiàn)用Mysql存取圖片操作實(shí)例

    這篇文章主要介紹了Java實(shí)現(xiàn)用Mysql存取圖片操作實(shí)例,本文講解了使用BLOB類型保存和讀取圖片的代碼實(shí)例,需要的朋友可以參考下
    2015-06-06
  • Java Spring @Lazy延遲注入源碼案例詳解

    Java Spring @Lazy延遲注入源碼案例詳解

    這篇文章主要介紹了Java Spring @Lazy延遲注入源碼案例詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
    2021-09-09
  • mybatis某些字段無法映射成功的解決

    mybatis某些字段無法映射成功的解決

    這篇文章主要介紹了mybatis某些字段無法映射成功的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • java——多線程基礎(chǔ)

    java——多線程基礎(chǔ)

    Java多線程實(shí)現(xiàn)方式有兩種,第一種是繼承Thread類,第二種是實(shí)現(xiàn)Runnable接口,兩種有很多差異,下面跟著本文一起學(xué)習(xí)吧,希望能給你帶來幫助
    2021-07-07
  • Java SpringMVC數(shù)據(jù)響應(yīng)超詳細(xì)講解

    Java SpringMVC數(shù)據(jù)響應(yīng)超詳細(xì)講解

    Spring?MVC?是?Spring?提供的一個(gè)基于?MVC?設(shè)計(jì)模式的輕量級(jí)?Web?開發(fā)框架,本質(zhì)上相當(dāng)于?Servlet,Spring?MVC?角色劃分清晰,分工明細(xì),本章來講解SpringMVC數(shù)據(jù)響應(yīng)
    2022-04-04
  • 詳解基于IDEA2020.1的JAVA代碼提示插件開發(fā)例子

    詳解基于IDEA2020.1的JAVA代碼提示插件開發(fā)例子

    這篇文章主要介紹了詳解基于IDEA2020.1的JAVA代碼提示插件開發(fā)例子,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06
  • java性能分析jconsole詳解

    java性能分析jconsole詳解

    這篇文章主要介紹了java性能分析jconsole詳解,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下
    2022-07-07
  • SpringBoot項(xiàng)目攔截器獲取Post方法的請(qǐng)求body實(shí)現(xiàn)

    SpringBoot項(xiàng)目攔截器獲取Post方法的請(qǐng)求body實(shí)現(xiàn)

    本文主要介紹了SpringBoot項(xiàng)目攔截器獲取Post方法的請(qǐng)求body,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-01-01
  • Java代理模式與動(dòng)態(tài)代理之間的關(guān)系以及概念

    Java代理模式與動(dòng)態(tài)代理之間的關(guān)系以及概念

    代理模式是開發(fā)中常見的一種設(shè)計(jì)模式,使用代理模式可以很好的對(duì)程序進(jìn)行橫向擴(kuò)展。動(dòng)態(tài)代理:代理類在程序運(yùn)行時(shí)被創(chuàng)建的代理方式。關(guān)鍵在于動(dòng)態(tài),程序具有了動(dòng)態(tài)特性,可以在運(yùn)行期間根據(jù)不同的目標(biāo)對(duì)象生成動(dòng)態(tài)代理對(duì)象
    2023-02-02

最新評(píng)論