拖动滑块验证功能在支付宝，微信各大平台都能见到这样的功能，那么基于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>