这篇文章主要为大家详细介绍了视图(视图)实现滑动验证功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
用视图(视图)实现滑动验证码,鼠标点击滑动验证,验证成功之后会显示验证通过。
程序分析
1 .{ 1 }鼠标的点击
2 ._滑块的拖动
{ 1 }未验证之前滑动条上显示的文字
4 ."滑块箭头指向视图(视图)函数
5判断是否拖动完毕
6 ._拖动完毕时改变背景色并显示验证成功
效果图演示
原始状态
点击之后拖动
拖动完毕
有没有感觉很奇妙的呢???
美元在欣赏代码之前准备工作要做好的!
* *010-5900 * *相关架包的引入(三个架包)
src= js/view。js /脚本脚本
src= 339 unpkg。com/element-ui/lib/index。js /脚本脚本
src=js/jquery.js/script脚本
代码演示
!文档类型html
超文本标记语言格式
头儿
meta charset=UTF-8
标题/标题
src= js/view。js /脚本脚本
src= 339 unpkg。com/element-ui/lib/index。js /脚本脚本
src=js/jquery.js/script脚本
样式(风格)。大[
边界半径:30px
位置:相对;
背景色:# 75 CDF 9;
宽度:300像素
高度:34像素
左边距:30像素
上边距:100像素
线路高度:34像素
文字对齐:中心;
}。手[
边界半径:30px
位置:绝对;
顶部:0像素
左:0像素
宽度:40px
高度:32像素
边界:1px固体#ccc
光标:移动;
}。处理程序[
背景:# fff URL( data:image/png);-伊甸园字幕组=-翻译:粒粒粒粒粒尘紫月猫姐风景校对:粒尘紫月猫姐风景校对:粒尘紫月猫姐校对:粒尘紫月猫姐时间轴:粒尘紫月猫姐校对:粒尘紫月猫姐时间轴:粒尘紫月猫姐校对:粒尘紫月猫姐时间轴:粒尘紫月猫姐校对:粒尘月猫姐时间轴:粒尘月猫姐时间轴:粒尘月猫姐时间轴:粒尘月猫姐校对:粒尘月猫姐时间轴:粒尘月猫姐时间轴:粒尘
}。处理程序完成[
背景:# fff URL( data:image/png);-伊甸园字幕组=-翻译:粒粒粒粒粒尘紫月猫姐风景校对:粒尘紫月猫姐风景校对:粒尘紫月猫姐校对:粒尘紫月猫姐时间轴:粒尘紫月猫姐校对:粒尘紫月猫姐时间轴:粒尘紫月猫姐校对:粒尘紫月猫姐时间轴:粒尘紫月猫姐校对:粒尘月猫姐时间轴:粒尘月猫姐时间轴:粒尘月猫姐时间轴:粒尘月猫姐校对:粒尘月猫姐时间轴:粒尘月猫姐时间轴:粒尘
}。BG[
边界半径:30px
背景色:# 13ce 66
高度:34像素
宽度:0像素
}。文本[
位置:绝对;
顶部:0像素
宽度:300像素
蚊子用户选择:无:
-网络工具包用户选择:无;
用户选择:无:
表示“具有…性质的”用户选择:无:
-ms-用户-选择:无:
}
/风格
/头
体表
div id=应用程序
div class=大
差异类=bg/div
差异类= text“{ confirm words } }/div
div @ mousedown= mousewnfn($ event) class= hand handler /div
/div
/div
/body
脚本编写
var vm=新视图
<应用程序名称>:#app,
名称:""
组件:{},
道具:{},
日期()
返回
beginClientX: 0,
摩门教徒:假的,
maxwidth: 258,
确认字: 拖动滑块验证-是啊
/*滑块文字*/
确认成功:假,/*是否成功*/
}
},
已创建(){},
观察:>
},
方法:>
mousedownfn:函数
这个。mousemovestata=true
这个。beginclientx=e . clientx
},
//按下滑块
成功函数()
$()。手)。removeClass(handler ).添加类(“处理程序完成”);
this.confirmWords=验证通过我不知道
$()。"大"。CSS({ 0 })
颜色:#fff
});
$()。"大"。CSS({ 0 })
背景色:13CE66
});
$()。手)。CSS({ 0 })
left: this.maxwidth
});
$()。bg。)。CSS({ 0 })
width: this.maxwidth
});
$(body ).unbind(" mousemove ");
$(body ).取消订阅(mouseup);
这。确认成功=真
} //判断是否成功
},
已挂载()
$(body ).on(mousemove ,(e)=& gt
//拖动使用箭头指向视图(视图)函数
如果(这个。mousemvested)>
var width=e .客户端x-this。开始客户端x;
如果(width 0 width=this.maxwidth)>
$()。手)。CSS({ 0 })
左:宽度
});
$()。bg。)。CSS({ 0 })
宽度:宽度
});
} else if(宽度this。最大宽度)}
这个。成功函数();
}
}
});
$(body ).on(mouseup ,(e)=& gt
//鼠标放开
这个。mousemovestata=false
var width=e .客户端x-this。开始客户端x;
如果(宽度这个。最大宽度)}
$()。手)。CSS({ 0 })
左:0
});
$()。bg。)。CSS({ 0 })
“宽度”:0
});
}
})
}
});
/脚本
/html
这就是本文的全部内容。希望对大家的学习有帮助,支持我们。