前端JS——滑动滑块验证登录（源码及效果）

源码:

<!doctype html>
<html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>Document</title><style>.box{position: relative;width: 300px;height: 34px;background: #e8e8e8;border-radius: 4px;left: 20px;
}
.btn{position: absolute;top: 0;width: 40px;height:32px;text-align: center;line-height: 32px;border-radius: 4px;z-index: 3;background-color: #fff;border: 1px solid #ccc;color: black;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}
.text{position: absolute;width: 100%;margin: 0;text-align: center;line-height: 34px;display: block;z-index: 2;/*-webkit-margin-before: 1em;-webkit-margin-after: 1em;*/-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;
}
.bg{position: absolute;height: 100%;background-color: yellowgreen;z-index: 1;
}</style></head><body><div class="box"><!--滑块--><div id="a" class="btn">>></div><!--文字--><p id="b"class="text">拖动滑块验证</p><!--背景--><div id="c"class="bg"></div>         </div></body><script>//原生写法
window.onload=function(){var btn=document.querySelector(".btn");var box=document.querySelector(".box");var bg=document.querySelector(".bg");var text=document.querySelector(".text");a.onmouseover = function(){this.style.cursor = 'pointer';}b.onmouseover = function(){this.style.cursor = 'pointer';}c.onmouseover = function(){this.style.cursor = 'pointer';}//封装选择器
//  function $(name){
//      return document.querySelector(name);
//  };
//  var box=$(".box"),btn=$(".btn").....;var flag=false;//按下onmousedown  拖动onmousemove//document.querySelector(".btn").onmousedown=function(event){//event事件状态
//      var e=event||window.event;//获取方法集合，可直接通过id, 类, 类型, 属性, 属性值等来选取元素（返回此名字的第一个）。btn.onmousedown=function(e){//按下var downX=e.clientX; //按下后对x轴的距离
//      console.log(downX);
//      alert("1");btn.onmousemove=function(e){//拖动var moveX=e.clientX-downX; //拖动后与x轴距离减去初始值距离，移动值
//      console.log(moveX);//移动范围if(moveX>-2){this.style.left=moveX+"px";//将移动值赋值给滑块bg.style.width=moveX+"px";//背景if(moveX>=(box.offsetWidth-btn.offsetWidth)){//包含原始宽度内边距边框，不包含外边框//拖到头，验证成功flag=true;text.innerHTML="验证成功";text.style.color="white";//事件清除btn.onmousedown=null;btn.onmousemove=null;}}}}//松开按钮btn.onmouseup=function(){        //事件清除btn.onmousemove=null;if(flag)return;this.style.left=0;//将移动值赋值给滑块bg.style.width=0;//背景}
}</script>
</html>

前端JS——滑动滑块验证登录（源码及效果）相关推荐

【按键精灵安卓版教程】二值化过QQ滑块验证【源码分享】
测试设备:雷电模拟器 540*960 dpi 240 基本原理: 把滑块验证图片转化成0和1的二值化图片,也就是黑白图原图二值化后的图片然后找滑块序列,匹配成功,就找到滑块位置了代码分享: D ...
前端Vue书籍翻页功能利用turn.js来完成以及知识点(源码)
目录下载文档开始构造方法可配置项方法语法事件两种方式添加事件自动翻页loading加载功能案例 CSS basic.css源码如下 JS里面代码太多了,直接官网下载 index. ...
HTML网页设计期末课程大作业 ~中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码
HTML网页设计期末课程大作业 ~ 中国茶文化5页面带轮播(HTML+CSS+JS)~ 学生网页设计作业源码临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从 ...
基于Java毕业设计新冠疫苗接种预约系统登录源码+系统+mysql+lw文档+部署软件
基于Java毕业设计新冠疫苗接种预约系统登录源码+系统+mysql+lw文档+部署软件基于Java毕业设计新冠疫苗接种预约系统登录源码+系统+mysql+lw文档+部署软件本源码技术栈: 项目架构 ...
java计算机毕业设计新冠疫苗接种预约系统登录源码+mysql数据库+lw文档+系统+调试部署
java计算机毕业设计新冠疫苗接种预约系统登录源码+mysql数据库+lw文档+系统+调试部署 java计算机毕业设计新冠疫苗接种预约系统登录源码+mysql数据库+lw文档+系统+调试部署本源码技 ...
java计算机毕业设计Vue网上书籍购买商城登录源码+mysql数据库+系统+lw文档+部署
java计算机毕业设计Vue网上书籍购买商城登录源码+mysql数据库+系统+lw文档+部署 java计算机毕业设计Vue网上书籍购买商城登录源码+mysql数据库+系统+lw文档+部署本源码技术栈 ...
基于Java毕业设计校园教务系统登录源码+系统+mysql+lw文档+部署软件
基于Java毕业设计校园教务系统登录源码+系统+mysql+lw文档+部署软件基于Java毕业设计校园教务系统登录源码+系统+mysql+lw文档+部署软件本源码技术栈: 项目架构:B/S架构开 ...
计算机毕业设计Java校园教务系统登录(源码+系统+mysql数据库+Lw文档）
计算机毕业设计Java校园教务系统登录(源码+系统+mysql数据库+Lw文档) 计算机毕业设计Java校园教务系统登录(源码+系统+mysql数据库+Lw文档) 本源码技术栈: 项目架构:B/S架构 ...
Yii2 使用 QQ 和 Weibo 第三方登录源码
我们社区在 yii2-authclient 多次升级后,登录异常.一直想寻求一种通用的方法,尽量不重写 OAuth2, BaseOAuth 以及 OAuthToken 类, 所以本次直接在 initU ...

前端JS——滑动滑块验证登录（源码及效果）

前端JS——滑动滑块验证登录（源码及效果）相关推荐

最新文章

热门文章