第Java實現(xiàn)滑動驗證碼(前端部分)目錄實現(xiàn)思路實現(xiàn)代碼實現(xiàn)結(jié)果

實現(xiàn)思路

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

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

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

實現(xiàn)代碼

后端請求（Controller）

SliderVerifyController

/**

*@author:Yang

*@create:2025-10-25

*@Description:滑動驗證

@RestController

@RequestMapping("/sliderVerify")

publicclassSliderVerifyController{

@Resource

privateSliderVerifyServicesliderVerifyService;

@GetMapping

publicResponseResultgenerateSliderVerify(){

returnsliderVerifyService.generateSliderVerify();

SliderVerifyServiceImpl

/**

*@author:Yang

*@create:2025-10-25

*@Description:

@Service

publicclassSliderVerifyServiceImplimplementsSliderVerifyService{

@Value("${my.staticPath}")

privateStringpath;

@Override

publicResponseResultgenerateSliderVerify(){

intindex=newRandom().nextInt(5)+1;

ImageSlideVerifyslideVerify=ImageSlideVerifyUtil.cutting(

newFile(System.getProperty("user.dir")+"/web_component/src/main/resources/static/sliderVerify/"+index+".png"));

returnnewResponseResult(200,slideVerify);

HTML代碼

!DOCTYPEhtml

htmllang="zh"

head

metacharset="UTF-8"

metahttp-equiv="X-UA-Compatible"content="IE=edge"

metaname="viewport"content="width=device-width,initial-scale=1.0"

title滑動驗證碼/title

/head

body

divid="box"

divid="content"

imgid="bg"src="bg.png"/

imgid="block"src="b.png"/

/div

!--滑塊--

divid="slider"

divid="slider-block"

/div

/div

/div

/body

script

letblockImg=document.querySelector("#block");//滑塊

letbgImg=document.querySelector("#bg");//背景

letsliderBlock=document.querySelector("#slider-block");//滑動欄的滑塊

functionsliderVerify(callback){

//獲取驗證碼信息

constxhr=newXMLHttpRequest();

xhr.open("get","http://localhost:8080/sliderVerify",true);

xhr.send();

xhr.onreadystatechange=function(){

if(this.readyState==4this.status==200){

letdata=JSON.parse(this.response).data;

blockImg.src=data.blockImg;

bgImg.src=data.bgImg;

blockImg.style.top=data.y+80+"px";

callbackcallback(data);//回調(diào)函數(shù)

//執(zhí)行

sliderVerify(function(data){

//添加鼠標(biāo)事件

sliderBlock.addEventListener("mousedown",(e1)={

constx=e1.x;

window.onmousemove=function(e){

letleft=e.x-x;

//設(shè)置邊界，因為我的圖片大小都是固定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";

//鼠標(biāo)釋放

window.onmouseup=function(e){

//獲取滑動到的位置

letleft=sliderBlock.style.left.split("px")[0];

//減去80內(nèi)邊距并轉(zhuǎn)成數(shù)字

left=Number(left)-80;

//清空鼠標(biāo)滑動事件

window.onmousemove=null;

//回到初始位置

sliderBlock.style.left=0+"px";

blockImg.style.left=0-20+"px";

//判斷是否在范圍內(nèi)

if(left=data.x-data.boundleft=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:02px;