我们知道验证码的目的是为了验证到底是人还是机器。
淘宝滑动验证码会采集用户的操作数据,环境数据等等,通过算法加密成一个字符串,提交到服务器分析,判断是不是人工在操作。
我这里写的只是模仿了样式,并没有进行那些复杂的操作,所以并不安全(不能判断人还是机器)。
因为触摸事件和鼠标事件不同,和获取clientX在移动端和pc端也不同! ! !所以分两端
下面有PC端和移动端! ! !(2019-03-12更新)
本文基于vue,引入下面组件可以直接使用
<强> 1,实际效果
<强> 2 PC端! ! ! vue组件(下面是一个vue组件,可以引入直接使用)
& lt; template>
& lt; div类="拖" ref=癲ragDiv”比;
& lt; div类=" drag_bg "祝辞& lt;/div>
& lt; div类=" drag_text "在{{confirmWords}} & lt;/div>
& lt; div ref=癿oveDiv @mousedown”=癿ousedownFn(事件)”:类=" {handler_ok_bg: confirmSuccess}”类=按沓绦騢andler_bg”祝辞& lt;/div>
& lt;/div>
& lt;/template>
& lt; script>
出口默认{
数据(){
返回{
beginClientX: 0,/*距离屏幕左端距离*/mouseMoveStata:假的,/*触发拖动状态判断*/maxwidth:“,/*拖动最大宽度,依据滑块宽度算出来的*/confirmWords:“拖动滑块验证“,/*滑块文字*/confirmSuccess:假/*验证成功判断*/}
}，
方法:{
mousedownFn:函数(e) {
如果(! this.confirmSuccess) {
e。preventDefault,,e.preventDefault ();//阻止文字选中等浏览器默认事件
这一点。mouseMoveStata=true;
这一点。beginClientX=e.clientX;
}
},//mousedoen事件
successFunction () {
这一点。confirmSuccess=true
这一点。confirmWords='验证通过”;
如果(window.addEventListener) {
document.getElementsByTagName (html) [0] .removeEventListener (mousemove, this.mouseMoveFn);
document.getElementsByTagName (html) [0] .removeEventListener (mouseup, this.moseUpFn);
其他}{
document.getElementsByTagName (html) [0] .removeEventListener (‘mouseup()=在{});
}
document.getElementsByClassName (drag_text) [0] .style。颜色=' # fff '
document.getElementsByClassName(处理器)[0].style。离开了=axwidth +“px”;
document.getElementsByClassName (drag_bg) [0] .style。宽度=axwidth +“px”;
},//验证成功函数
mouseMoveFn (e) {
如果(this.mouseMoveStata) {
让宽度=e。clientX - this.beginClientX;
如果(width> 0,,width<=this.maxwidth) {
document.getElementsByClassName(处理器)[0].style。左=宽度+“px”;
document.getElementsByClassName (drag_bg) [0] .style。宽度=宽度+“px”;
}else if (width> this.maxwidth) {
this.successFunction ();
}
}
},//mousemove事件
moseUpFn (e) {
这一点。mouseMoveStata=false;
var宽度=e。clientX - this.beginClientX;
如果(width
& lt; scoped>风格;
.drag {
位置:相对;
background - color: # e8e8e8;
宽度:100%;
高度:34 px;
行高:34 px;
text-align:中心;
}
.handler {
宽度:40像素;
高度:32像素;
边界:1 px固体# ccc;
光标:移动;
}
.handler_bg {
background: #fff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh7cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==") no-repeat center;
}
.handler_ok_bg {
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
