Java實(shí)現(xiàn)滑動(dòng)驗(yàn)證碼(前端部分)
實(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é)果
到此這篇關(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)的問題,需要的朋友可以參考下2020-12-12Java實(shí)現(xiàn)用Mysql存取圖片操作實(shí)例
這篇文章主要介紹了Java實(shí)現(xiàn)用Mysql存取圖片操作實(shí)例,本文講解了使用BLOB類型保存和讀取圖片的代碼實(shí)例,需要的朋友可以參考下2015-06-06Java 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ā)例子,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06SpringBoot項(xiàng)目攔截器獲取Post方法的請(qǐng)求body實(shí)現(xiàn)
本文主要介紹了SpringBoot項(xiàng)目攔截器獲取Post方法的請(qǐng)求body,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-01-01Java代理模式與動(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