原生js实现拖动滑块验证

拖动滑块验证是现在的网站随处可见的，各式各样的拖动法都有。

下面实现的是某宝的拖动滑块验证：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">.drag{position: relative;width: 300px;height: 34px;background-color: #e8e8e8;line-height: 34px;}.bg{position: absolute;width: 40px;height: 100%;background-color: #7ac23c;}.text{position: absolute;width: 100%;margin: 0;text-align: center;}.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;border: 1px solid #ccc;cursor: pointer;}</style>
</head>
<body><div class="drag"><div class="bg"></div><p class="text">拖动滑块验证</p><div class="btn"></div></div><script>var $ = function(selector){return document.querySelector(selector);},box = $('.drag'),//容器
        bg = $('.bg'),//绿色背景
        text = $('.text'),//文字
        btn = $('.btn'),//拖动按钮
        done = false;//是否通过验证
btn.onmousedown = function(e){var e = e || window.event;var posX = e.clientX - this.offsetLeft;btn.onmousemove = function(e){var e = e || event;var x = e.clientX - posX;this.style.left = x + 'px';bg.style.width = this.offsetLeft + 'px';// 通过验证if(x >= box.offsetWidth - btn.offsetWidth){done = true;btn.onmousedown = null;btn.onmousemove = null;text.innerHTML = '通过验证';}};document.onmouseup = function(){btn.onmousemove = null;btn.onmouseup = null;if(done)return;btn.style.left = 0;bg.style.width = 0;}};text.onmousedown = function(){return false;}</script>
</body>
</html>

由于是原生js实现的，因此没有加上动画效果，不然代码量太大。

代码简单，直接看下结构就明了了。

转载于:https://www.cnblogs.com/11lang/p/6819142.html

原生js实现拖动滑块验证相关推荐

纯HTML和JS实现拖动滑块验证效果
效果展示: 代码: index.html <!DOCTYPE html> <html lang="en"><head><meta char ...
拖动滑块验证——原生JS
** 拖动滑块验证--原生JS ** 大体思路: 1,拖动滑块验证我们首先要分析需要什么事件,怎么触发拖动滑块. 2,首先需要点击事件,当你点击鼠标的时候获取到一个X轴的距离. 3,还需要一个鼠标移动 ...
css3 滑动验证,Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解. 效果图如下所示: 拖动前拖动后代码引用的css与js都是线上的将代码 ...
jQuery手机触屏拖动滑块验证跳转插件
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...
拖动滑块验证--vue实现
代码引用的css与js都是线上的将代码全部复制到一个html中可以直接打开,极其简单. 来分析一下代码底色div上放了一个变色div再放一个提示字的div最后加一个滑块div 给滑块div绑定鼠标 ...
小程序拖动滑块验证（自定义组件插件分享）
效果图: 文章目录: #1 创建组件 #2 组件编码 MoveVerify.wxss MoveVerify.wxml MoveVerify.js #3 页面引用在页面的 json 文件中引用组件在 ...
JavaScript实现拖动滑块验证（方法已封装）
前提之前写了一篇博文,题目是<JavaScript实现拖动滑块验证>,里面都是用最简单的方式实现的.后来,群里大神推荐了一款unlock.js插件,称作幻灯片解锁插件.在这里附上它的gi ...
jQuery拖动滑块验证样式
样式: 目录结构: HTML代码: <!DOCTYPE html> <html><head><title>jQuery仿淘宝网拖动滑块验证码代码< ...
微信小程序拖动滑块验证
index.wxml <movable-area class="content" style="width:{{area_width}}%">拖动滑 ...

原生js实现拖动滑块验证

原生js实现拖动滑块验证相关推荐

最新文章

热门文章