基于JS组件实现拖动滑块验证功能(代码分享)


Posted in Javascript onNovember 18, 2016

拖动滑块验证功能在支付宝,微信各大平台都能见到这样的功能,那么基于js组件是如何实现此功能的呢?今天小编就给大家分享下js 拖动滑块 验证功能的实现代码,具体代码如下所示:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta http-equiv="X-UA-Compatible" content="IE-Edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style"> 
<meta content="telephone=no" name="format-detection"> 
<meta content="email=no" name="format-detection"> 
<title>拖动滑块验证</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="">
<style>
*{ margin:0; padding:0; }
body{ font:12px/1.125 Microsoft YaHei; background:#fff; }
ul, li{ list-style:none; }
a{ text-decoration:none; }
.ani{transition:all .3s;}
.wrap{ width:300px; height:350px; text-align:center; margin:150px auto;}
.inner{ padding:15px; }
.clearfix{ overflow:hidden; _zoom:1; }
.none{ display:none; }
#slider{position:relative;background-color:#e8e8e8;width:300px;height:34px;line-height:34px;text-align:center;}
#slider .handler{position:absolute;top:0px;left:0px;width:40px;height:32px;border:1px solid #ccc;cursor:move;}
.handler_bg{background:#fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;}
.handler_ok_bg{background:#fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==") no-repeat center;}
#slider .drag_bg{background-color:#7ac23c;height:34px;width:0px;}
#slider .drag_text{position:absolute;top:0px;width:300px;-moz-user-select:none;-webkit-user-select:none;user-select:none;-o-user-select:none;-ms-user-select:none;}
.unselect{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;}
.slide_ok{color:#fff;}
</style>
</head>
<body>
<div class="wrap">
<div id="slider">
<div class="drag_bg"></div>
<div class="drag_text" onselectstart="return false;" unselectable="on">拖动滑块验证</div>
<div class="handler handler_bg"></div>
</div>
</div>

<script>
(function(window,document,undefined){
var dog = {//声明一个命名空间,或者称为对象
$:function(id){
return document.querySelector(id);
},
on:function(el,type,handler){
el.addEventListener(type,handler,false);
},
off:function(el,type,handler){
el.removeEventListener(type,handler,false);
}
}; 
//封装一个滑块类
function Slider(){
var args = arguments[0];
for(var i in args){
this[i] = args[i]; //一种快捷的初始化配置
}
//直接进行函数初始化,表示生成实例对象就会执行初始化
this.init();
}
Slider.prototype = {
constructor:Slider,
init:function(){
this.getDom();
this.dragBar(this.handler);
},
getDom:function(){
this.slider = dog.$('#'+this.id);
this.handler = dog.$('.handler');
this.bg = dog.$('.drag_bg');
},
dragBar:function(handler){
var that = this,
startX = 0,
lastX = 0,
doc = document,
width = this.slider.offsetWidth,
max = width - handler.offsetWidth,
drag = {
down:function(e){
var e = e||window.event;
that.slider.classList.add('unselect');
startX = e.clientX - handler.offsetLeft;
console.log('startX: '+startX+' px');
dog.on(doc,'mousemove',drag.move);
dog.on(doc,'mouseup',drag.up);
return false;
},
move:function(e){
var e = e||window.event;
lastX = e.clientX - startX;
lastX = Math.max(0,Math.min(max,lastX)); //这一步表示距离大于0小于max,巧妙写法
console.log('lastX: '+lastX+' px');
if(lastX>=max){
handler.classList.add('handler_ok_bg');
that.slider.classList.add('slide_ok');
dog.off(handler,'mousedown',drag.down);
drag.up();
}
that.bg.style.width = lastX + 'px';
handler.style.left = lastX + 'px';
},
up:function(e){
var e = e||window.event;
that.slider.classList.remove('unselect');
if(lastX < width){ 
that.bg.classList.add('ani');
handler.classList.add('ani');
that.bg.style.width = 0;
handler.style.left = 0;
setTimeout(function(){
that.bg.classList.remove('ani');
handler.classList.remove('ani');
},300);
}
dog.off(doc,'mousemove',drag.move);
dog.off(doc,'mouseup',drag.up);
}
};
dog.on(handler,'mousedown',drag.down);
}
};
window.S = window.Slider = Slider;
})(window,document);
var defaults = {
id:'slider'
};
new S(defaults);
</script>
</body>
</html>

以上所述是小编给大家介绍的基于JS组件实现拖动滑块验证功能(代码分享),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript textarea光标定位方法(兼容IE和FF)
Mar 12 Javascript
固定背景实现的背景滚动特效示例分享
May 19 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
Apr 12 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
May 30 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 jQuery
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 Javascript
手把手教你从零开始react+antd搭建项目
Jun 03 Javascript
Ajax的概述与实现过程
Nov 18 #Javascript
简单谈谈ES6的六个小特性
Nov 18 #Javascript
jQuery post数据至ashx实例详解
Nov 18 #Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 #Javascript
基于jQuery的checkbox全选问题分析
Nov 18 #Javascript
JavaScript动态数量的文件上传控件
Nov 18 #Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 #Javascript
You might like
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
PHP+MYSQL 出现乱码的解决方法
2008/08/08 PHP
PHP 工厂模式使用方法
2010/05/18 PHP
一个简单php扩展介绍与开发教程
2010/08/19 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
如何让搜索引擎抓取AJAX内容解决方案
2014/08/25 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
全新打包工具parcel零配置vue开发脚手架
2018/01/11 Javascript
node 版本切换的实现
2020/02/02 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
python定时利用QQ邮件发送天气预报的实例
2017/11/17 Python
git进行版本控制心得详谈
2017/12/10 Python
简单了解python反射机制的一些知识
2019/07/13 Python
python带参数打包exe及调用方式
2019/12/21 Python
Python selenium文件上传下载功能代码实例
2020/04/13 Python
Pycharm Plugins加载失败问题解决方案
2020/11/28 Python
酒店个人培训自我鉴定
2013/12/11 职场文书
条幅标语大全
2014/06/20 职场文书
学校学习雷锋活动总结
2014/07/03 职场文书
农业局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
整改通知书格式
2015/04/22 职场文书
Redis安装启动及常见数据类型
2021/04/14 Redis