Vue 滑动验证

用Vue实现滑动验证码，鼠标点击滑动验证，验证成功之后会显示验证通过。

程序分析

  1. 鼠标的点击
  2. 滑块的拖动
  3. 未验证之前滑动条上显示的文字
  4. 滑块箭头指向Vue函数
  5. 判断是否拖动完毕
  6. 拖动完毕时改变背景色并显示验证成功

效果图演示

原始状态
在这里插入图片描述
点击之后拖动
在这里插入图片描述
拖动完毕
在这里插入图片描述
有没有感觉很奇妙的呢？？？

在欣赏代码之前准备工作要做好的！！！
**特别注意：**相关架包的引入（三个架包）

		<script src="js/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="js/jquery.js"></script>

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/vue.js"></script><script src="https://unpkg.com/element-ui/lib/index.js"></script><script src="js/jquery.js"></script><style>.big {border-radius:30px;position: relative;background-color: #75CDF9;width: 300px;height: 34px;margin-left: 30px;margin-top: 100px;line-height: 34px;text-align: center;}.hand {border-radius:30px;position: absolute;top: 0px;left: 0px;width: 40px;height: 32px;border: 1px solid #ccc;cursor: move;}.handler {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;}.handlerFinish {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;}.bg {border-radius:30px;background-color: #13CE66;height: 34px;width: 0px;}.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;}</style></head><body><div id="app"><div class="big" ><div class="bg"></div><div class="text">{{confirmWords}}</div><div @mousedown="mousedownFn($event)" class="hand handler"></div></div></div></body><script>var vm = new Vue({el: "#app",name: '',components: {},props: {},data() {return {beginClientX: 0,mouseMoveStata: false,maxwidth: 258,confirmWords: '拖动滑块验证',/*滑块文字*/confirmSuccess: false, /*是否成功*/}},created() {},watch: {},methods: {mousedownFn: function(e) {this.mouseMoveStata = true;this.beginClientX = e.clientX;}, //按下滑块successFunction() {$(".hand").removeClass('handler').addClass('handlerFinish');this.confirmWords = '验证通过'$(".big").css({'color': '#fff'});$(".big").css({'background-color': '#13CE66'});$(".hand").css({'left': this.maxwidth});$(".bg").css({'width': this.maxwidth});$('body').unbind('mousemove');$('body').unbind('mouseup');this.confirmSuccess = true;} //判断是否成功},mounted() {$('body').on('mousemove', (e) => {//拖动使用箭头指向Vue函数if(this.mouseMoveStata) {var width = e.clientX - this.beginClientX;if(width > 0 && width <= this.maxwidth) {$(".hand").css({'left': width});$(".bg").css({'width': width});} else if(width > this.maxwidth) {this.successFunction();}}});$('body').on('mouseup', (e) => {//鼠标放开 this.mouseMoveStata = false;var width = e.clientX - this.beginClientX;if(width < this.maxwidth) {$(".hand").css({'left': 0});$(".bg").css({'width': 0});}})}});</script></html>

了解更多关注我呦！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/565888.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【课题总结】OpenCV 抠图项目实战（2）抠图绪论

【课题总结】OpenCV 抠图项目实战（2）抠图绪论

Python 小白的课题报告&#xff1a;OpenCV 抠图项目实战&#xff08;2&#xff09;抠图绪论 本系列是 Python 小白的课题作业《基于OpenCV 的图像分割和抠图》。 需要说明的是&#xff0c;本系列并不能算是 OpenCV 的抠图项目教程&#xff0c;只是以此为主题的课题报告。其中包…
阅读更多...
滑动解锁

滑动解锁

模仿手机解锁滑动&#xff0c;点击向右滑动完毕即可显示解锁成功。 程序详解 1.点击和松开事件 2. 未解锁之前显示的样式和背景色 3. 解锁之后显示的样式和背景色 4. 滑动完毕后才能解锁 图片演示 原始界面 点击滑动后 解锁成功 下面我们跟随我一起来欣赏一下代码 代码…
阅读更多...
Python中利用LSTM模型进行时间序列预测分析

Python中利用LSTM模型进行时间序列预测分析

时间序列模型 时间序列预测分析就是利用过去一段时间内某事件时间的特征来预测未来一段时间内该事件的特征。这是一类相对比较复杂的预测建模问题&#xff0c;和回归分析模型的预测不同&#xff0c;时间序列模型是依赖于事件发生的先后顺序的&#xff0c;同样大小的值改变顺序…
阅读更多...
【课题总结】OpenCV 抠图项目实战（3）抠图综述

【课题总结】OpenCV 抠图项目实战（3）抠图综述

Python 小白的课题报告—OpenCV 抠图项目实战&#xff08;3&#xff09;抠图综述 本系列是 Python 小白的课题作业《基于OpenCV 的图像分割和抠图》。 需要说明的是&#xff0c;本系列并不能算是 OpenCV 的抠图项目教程&#xff0c;只是以此为主题的课题报告。其中包括了一个较…
阅读更多...
随机数验证码

随机数验证码

由字母和数字组成的验证码&#xff0c;点击验证码图片或者换一张时验证码会随机生成。 程序解读 字母和数字的组合图片和换一张文字的点击样式随机生成验证码判断是否正确正确之后弹框提示 效果演示 原始样式 点击验证码图片或者换一张字样时随机生成新的验证码 输入错误…
阅读更多...
【课题总结】OpenCV 抠图项目实战（4）固定阈值抠图

【课题总结】OpenCV 抠图项目实战（4）固定阈值抠图

Python 小白的课题报告—OpenCV 抠图项目实战&#xff08;4&#xff09;固定阈值抠图 本系列是 Python 小白的课题作业《基于OpenCV 的图像分割和抠图》。 需要说明的是&#xff0c;本系列并不能算是 OpenCV 的抠图项目教程&#xff0c;只是以此为主题的课题报告。其中包括了一…
阅读更多...
数学公式验证码

数学公式验证码

给出简单的数学算法&#xff08;加减法运算&#xff09;&#xff0c;计算结果为验证码。 效果演示 原始样式 点击换一张或者点击验证码图片的时候随机生成新的数学验证码 输入错误的验证码 输入正确的验证码 代码演示 注意&#xff1a;引入两个架包 <script type&qu…
阅读更多...
【课题总结】OpenCV 抠图项目实战（5）自适应阈值抠图

【课题总结】OpenCV 抠图项目实战（5）自适应阈值抠图

Python 小白的课题报告—OpenCV 抠图项目实战&#xff08;5&#xff09;自适应阈值抠图 本系列是 Python 小白的课题作业《基于OpenCV 的图像分割和抠图》。 需要说明的是&#xff0c;本系列并不能算是 OpenCV 的抠图项目教程&#xff0c;只是以此为主题的课题报告。其中包括了…
阅读更多...
滑动验证

滑动验证

拖动滑块进行验证码的验证。 滑动验证有两种&#xff1a; 图片滑动验证长方形的滑动条验证 一 &#xff1a; 图片滑动验证 效果演示 原始样式 没有正确验证的时候滑块会直接回到初始位置让你再次滑动验证 验证成功会给出提示 看代码之前**注意&#xff1a;**代码中要引…
阅读更多...
Feedback Prize-Kaggle比赛调研

Feedback Prize-Kaggle比赛调研

1.比赛调研 1.1 比赛链接 Feedback Prize - Predicting Effective Arguments | Kaggle 1.2 比赛周期 5.24-8.23 1.3 比赛的快速介绍 本次比赛的目标是将学生写作中的争论元素分类为“有效”、“充分”或“无效”。您将创建一个使用代表美国 6 至 12 年级人口的数据进行训…
阅读更多...
【课题总结】OpenCV 抠图项目实战（6）色彩范围抠图

【课题总结】OpenCV 抠图项目实战（6）色彩范围抠图

Python 小白的课题报告—OpenCV 抠图项目实战&#xff08;6&#xff09;色彩范围抠图 本系列是 Python 小白的课题作业《基于OpenCV 的图像分割和抠图》。 需要说明的是&#xff0c;本系列并不能算是 OpenCV 的抠图项目教程&#xff0c;只是以此为主题的课题报告。其中包括了一…
阅读更多...
点选验证码

点选验证码

根据图片下方文字提示点击图片验证码对应的文字完成验证。 效果演示 原始样式 点击文字错误时 点击验证成功 在欣赏代码之前**注意&#xff1a;**引入两个架包 <script type"text/javascript" src"js/jquery.min.js"></script> <scri…
阅读更多...
【课题总结】OpenCV 抠图项目实战（7）边缘检测

【课题总结】OpenCV 抠图项目实战（7）边缘检测

Python 小白的课题报告—OpenCV 抠图项目实战&#xff08;7&#xff09; 本系列是 Python 小白的课题作业《基于OpenCV 的图像分割和抠图》。 需要说明的是&#xff0c;本系列并不能算是 OpenCV 的抠图项目教程&#xff0c;只是以此为主题的课题报告。其中包括了一个较为完整的…
阅读更多...
一文带你了解美国运通比赛

一文带你了解美国运通比赛

1.比赛调研 1.1 比赛链接 American Express - Default Prediction | Kaggle 1.2 比赛周期 8.24截止 1.3 比赛的快速介绍 无论是在餐厅外出还是购买音乐会门票&#xff0c;现代生活都依靠信用卡的便利进行日常购物。它使我们免于携带大量现金&#xff0c;还可以提前全额购…
阅读更多...
【python】Ubuntu下安装spyder及matplotlib中文显示

【python】Ubuntu下安装spyder及matplotlib中文显示

一、查看Ubuntu版本 $ lsb_release -a No LSB modules are available. Distributor ID: Ubuntu Description: Ubuntu 22.04.3 LTS Release: 22.04 Codename: jammy尝试用cat /etc/debian_version命令&#xff0c;竟然可以显示出来Debian的版本。 $ cat /etc/debian_version …
阅读更多...
【课题总结】OpenCV 抠图项目实战（8）图像轮廓

【课题总结】OpenCV 抠图项目实战（8）图像轮廓

Python 小白的课题报告—OpenCV 抠图项目实战&#xff08;8&#xff09; 本系列是 Python 小白的课题作业《基于OpenCV 的图像分割和抠图》。 需要说明的是&#xff0c;本系列并不能算是 OpenCV 的抠图项目教程&#xff0c;只是以此为主题的课题报告。其中包括了一个较为完整的…
阅读更多...
SQLServer 联合查询

SQLServer 联合查询

联合查询分为内连接和外连接两个 一&#xff1a; 外连接又分为&#xff1a;左连接、右连接、完全外连接。 1. 左连接 left join或 left outer join SQL语句&#xff1a; select * from student left join course student .IDcourse.ID语句解说&#xff1a;左外连接包含left …
阅读更多...
H5 五子棋小游戏

H5 五子棋小游戏

用H5实现双人五子棋小游戏。 功能分解&#xff1a; 棋盘的大小自己设置白色棋子和黑色棋子的点击事件有棋子的地方不能再次放棋子判断同色棋子是否够五个够五个之后弹框显示胜利 效果演示 原始样式 选择之后开始游戏 有没有一种特别好玩的感觉呢&#xff1f;&#xff1f;…
阅读更多...
【课题报告】OpenCV 抠图项目实战（10）PyQt5 使用

【课题报告】OpenCV 抠图项目实战（10）PyQt5 使用

Python 小白的课题报告—OpenCV 抠图项目实战&#xff08;10&#xff09;PyQt5 使用 本系列是 Python 小白的课题作业《基于OpenCV 的图像分割和抠图》。 需要说明的是&#xff0c;本系列并不能算是 OpenCV 的抠图项目教程&#xff0c;只是以此为主题的课题报告。其中包括了一个…
阅读更多...
IDEA 生成get和set方法

IDEA 生成get和set方法

使用IDEA自动生成get和set方法。 在IDEA中使用快捷键altinsert. 图解示例 要生成get和set的页面 使用altinsert快捷键 点击Getter and Setter 全部选中 点击ok之后get和set方法就自动生成了
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023