JavaScript实现拖动滑块验证(方法已封装) 叁歲伎倆 2022-05-11 20:16 326阅读 0赞 ### 前提 ### * 之前写了一篇博文,题目是[《JavaScript实现拖动滑块验证》][JavaScript],里面都是用最简单的方式实现的。后来,群里大神推荐了一款`unlock.js`插件,称作`幻灯片解锁插件`。在这里附上它的`github`地址:[https://github.com/menthe/unlock.js][https_github.com_menthe_unlock.js]。 * 在看了它内部的实现之后,虽然没完全看懂哈,但是基本功能都看的差不多了。然后就根据它的底层实现,自己学着将之前写的代码进行了封装,**`相当于进阶版`**。 * 做法:`先根据需求定义好自己要用到的一些方法;其次将所有方法按照逻辑思维都依次罗列出来,先不填充方法体;然后根据需要互相调用方法;最后再根据要实现的功能填充之前定义好的方法。` * 说实话,封装之后的代码看起来思路更加明确,代码层次清晰可见,不会将冗余的代码都放在一个`function`中包裹起来。同时也减少了代码复用,提高代码的利用效率。这是自己最直观的感受。 * 刚开始尝试封装方法的时候,举步维艰,花费了很多时间,不过最终还是成功了。 * 自己分析了一下,主要原因还是:`思路不清晰;不懂得如何去封装;没有一个完整的逻辑思维结构;技术掌握不熟练`。 **注意:在这里首次尝试了字体图标`iconfont`的使用,如果没有字体文件(即`iconfont.css`)滑块上的样式就不会显示。** **引用方法:`<link rel="stylesheet" href="font/iconfont.css">`** **使用位置:滑块中的图标样式,即`<i><i>`标签** [使用方法:iconfont字体图标的使用方法–超简单!(点击链接查看)][iconfont] **建议:** * 在 [iconfont-阿里巴巴矢量图标库][iconfont-] 中找到自己想要的字体图标,整合一下然后引入到自己的页面中就行。 * 将`<i><i>`标签替换成 `html中符号对应的字符转义`,[详情查看这里][Link 1]。 * 移除掉`<i><i>`标签,将滑块的背景设置成一个`base64格式`加密过的图片或普通格式的图片。 `(优点:相比普通图片,占用资源少;缺点:图片对应的代码太长了)` **另外,在这里附上一个`base64格式`加密后的图片样式的使用方法:(可以自己尝试着使用)** //其实这个图片显示的内容就是"<<"符号。 .btn { position: absolute; width: 40px; height: 32px; background: #fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==) center no-repeat; background-size: 13px;//不设置这个属性,背景图片会不成比例的显示 border: 1px solid #ccc; cursor: move; } ![这里写图片描述][70] ![这里写图片描述][70 1] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑块解锁封装js方法</title> <!--注:这里首次用到了iconfont的语法,即矢量图标--> <link rel="stylesheet" href="font/iconfont.css"> <style> *{ padding: 0; margin: 0; } #box{ position: relative; width: 300px; height: 40px; margin: 0 auto; margin-top: 10px; background-color: #e8e8e8; box-shadow: 1px 1px 5px rgba(0,0,0,0.2); } .bgColor{ position: absolute; left:0; top:0; width:40px; height: 40px; background-color: lightblue; } .txt{ position: absolute; width: 100%; height: 40px; line-height: 40px; font-size: 14px; color: #000; text-align: center; } .slider{ position: absolute; left:0; top:0; width: 50px; height: 38px; border: 1px solid #ccc; background: #fff; text-align: center; cursor: move; } .slider>i{ position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); } .slider.active>i{ color:green; } </style> </head> <body> <div id="box" onselectstart="return false;"> <div class="bgColor"></div> <div class="txt" >滑动解锁</div> <!--给i标签添加上相应字体图标的类名即可--> <div class="slider"><i class="iconfont icon-double-right"></i></div> </div> <script> //一、定义了一个获取元素的方法 function getEle(selector){ return document.querySelector(selector); } //二、获取到需要用到的DOM元素 var box = getEle("#box"),//容器 bgColor = getEle(".bgColor"),//背景色 txt = getEle(".txt"),//文本 slider = getEle(".slider"),//滑块 icon = getEle(".slider>i"), successMoveDistance = box.offsetWidth- slider.offsetWidth,//解锁需要滑动的距离 downX,//用于存放鼠标按下时的位置 isSuccess = false;//是否解锁成功的标志,默认不成功 //三、给滑块添加鼠标按下事件 slider.onmousedown = mousedownHandler; //3.1鼠标按下事件的方法实现 function mousedownHandler(e){ bgColor.style.transition = ""; slider.style.transition = ""; var e = e || window.event || e.which; downX = e.clientX; //在鼠标按下时,分别给鼠标添加移动和松开事件 document.onmousemove = mousemoveHandler; document.onmouseup = mouseupHandler; }; //四、定义一个获取鼠标当前需要移动多少距离的方法 function getOffsetX(offset,min,max){ if(offset < min){ offset = min; }else if(offset > max){ offset = max; } return offset; } //3.1.1鼠标移动事件的方法实现 function mousemoveHandler(e){ var e = e || window.event || e.which; var moveX = e.clientX; var offsetX = getOffsetX(moveX - downX,0,successMoveDistance); bgColor.style.width = offsetX + "px"; slider.style.left = offsetX + "px"; if(offsetX == successMoveDistance){ success(); } //如果不设置滑块滑动时会出现问题(目前还不知道为什么) e.preventDefault(); }; //3.1.2鼠标松开事件的方法实现 function mouseupHandler(e){ if(!isSuccess){ bgColor.style.width = 0 + "px"; slider.style.left = 0 + "px"; bgColor.style.transition = "width 0.8s linear"; slider.style.transition = "left 0.8s linear"; } document.onmousemove = null; document.onmouseup = null; }; //五、定义一个滑块解锁成功的方法 function success(){ isSuccess = true; txt.innerHTML = "解锁成功"; bgColor.style.backgroundColor ="lightgreen"; slider.className = "slider active"; icon.className = "iconfont icon-xuanzhong"; //滑动成功时,移除鼠标按下事件和鼠标移动事件 slider.onmousedown = null; document.onmousemove = null; }; </script> </body> </html> ![70 2][] [JavaScript]: https://blog.csdn.net/tel13259437538/article/details/79822694 [https_github.com_menthe_unlock.js]: https://github.com/menthe/unlock.js [iconfont]: https://www.cnblogs.com/hjvsdr/p/6639649.html [iconfont-]: http://www.iconfont.cn/ [Link 1]: https://blog.csdn.net/wusuopuBUPT/article/details/8817826 [70]: /images/20220512/db419306208f41c394b088b7466fc228.png [70 1]: /images/20220512/795014250720401886ed1c0d9c92cd72.png [70 2]: /images/20220512/485e6ac464c24bccae39564e0404e8a0.png
还没有评论,来说两句吧...