html登陆滑动验证,JavaScript实现登录滑块验证
本文实例为大家分享了JavaScript实现登录滑块验证的具体代码,供大家参考,具体内容如下
html代码
按住滑块,拖拽验证
javascript代码
// 滑块验证
var oRight = document.getElementById("right-select");
var bg = document.getElementById("left-select");
var title = document.getElementById("title-p");
var i = document.getElementById("icon-dui");
oRight.onmousedown = function (e) {
var downX = e.clientX; //按下按钮后与窗口的x轴间距
// 鼠标移动事件
oRight.onmousemove = function (e) {
if (e.clientX != 240) {
oRight.style.left = 0 + "px";
bg.style.left = 0 + "px";
}
var moveX = e.clientX - downX; //滑动的时候距离窗口的x轴的间距
//只有在大于0的时候才拖动,否则会出现反向拖动
if (moveX > 0) {
oRight.style.left = moveX + "px"; //滑块与左边的距离
bg.style.width = moveX + "px"; //背景的宽度就是滑块距离左边的位置
if (moveX >= 280 - oRight.offsetWidth) {
i.className = "iconfont icon-xingzhuang";
i.style.color = "rgb(86, 192, 15)";
title.innerText = "验证通过";
title.style.color = "#fff";
oRight.onmousemove = null;
oRight.onmousedown = null;
}
}
};
};
style代码
注:样式为sass文件
*{margin: 0;padding: 0;box-sizing: border-box;}
.login-select {
width: 280px;
height: 40px;
margin: auto;
margin-top: 20px;
margin-left: 15px;
margin-right: 15px;
text-align: center;
line-height: 40px;
background: rgba(134, 134, 131, 0.6);
display: flex;
position: relative;
#err-select {
width: 138px;
height: 38px;
position: absolute;
right: -152px;
top: 0;
color: #fff;
font-size: 12px;
border-radius: 5px;
line-height: 38px;
text-align: center;
background: rgb(177, 71, 71);
}
#title-p {
text-align: center;
line-height: 40px;
width: 100%;
height: 100%;
font-size: 14px;
position: absolute;
}
#left-select {
width: 0;
height: 100%;
transform: translate(0.3s);
background: rgb(86, 192, 15);
}
#right-select {
width: 40px;
height: 40px;
background: #fff;
color: #aaaa;
text-align: center;
line-height: 40px;
border: 1px solid #ccc;
position: absolute;
cursor: move;
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html登陆滑动验证,JavaScript实现登录滑块验证相关推荐
- 登录滑块验证表单_如何构建双滑块登录和注册表单
登录滑块验证表单 Some of you might already know but for those who don't, I'm starting a Weekly Coding Challe ...
- JavaScript实现拖动滑块验证(方法已封装)
前提 之前写了一篇博文,题目是<JavaScript实现拖动滑块验证>,里面都是用最简单的方式实现的.后来,群里大神推荐了一款unlock.js插件,称作幻灯片解锁插件.在这里附上它的gi ...
- 突破淘宝登录滑块验证反爬,防止识别为Chrome自动控制
文章首发于慕课网手记,已同步到个人博客:https://www.donlex.cn 上次的文章<在爬100万数据的时候,我发现了爬虫的进阶之路> ,有"怂恿"大家伙去突 ...
- python实现滑块验证功能_python3.8.1+selenium实现登录滑块验证功能
python3.8.1+selenium解决登录滑块验证的问题,先给大家分享一个效果图,感觉不错,可以参考实现代码. 这里的滑块是qq邮箱的截图,如图所示,可以作为同类滑块验证的参考. "& ...
- JavaScript实现拖动滑块验证
Write By Monkeyfly 以下内容均为原创,如需转载请注明出处. 前提 之前在优化别人写的登录界面时,遇到了滑动解锁成功后发送短信验证码的场景,因为涉及到改动,所以必须要明白它是怎么实现的 ...
- css3 滑动验证,Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解. 效果图如下所示: 拖动前 拖动后 代码引用的css与js都是线上的 将代码 ...
- 滑动轨迹 曲线 python_python处理滑块验证的轨迹计算问题
在上一回中说了五行代码找图中滑块验证的缺口位置<python五行代码解决滑块验证的缺口距离识别,破解滑块验证>,本章讲轨迹相关的问题. 滑块验证核心是后台验证轨迹参数,效验轨迹取点的分布, ...
- html 表单js验证,JavaScript使用表单元素验证表单
第一章:使用JavaScript验证表单 JavaScript的主要作用:验证表单 1最简单的表单验证-禁止空白的必填项目 1.1最简单的HTML结构 网站最基础的就是注册,它是一个系统的交互基础. ...
- php yanzhengm,php登录验证_php用户登录与验证的代码举例
摘要 腾兴网为您分享:php用户登录与验证的代码举例,雨课堂版,新东方,小度音响,手机互联等软件知识,以及py平台,折扇app,内蒙古税务局,货代,兰斯10,新浪长微博,吉民生,yy球球直播视频,速优 ...
- java spring登录验证_springMVC 用户登录权限验证实现过程解析
通过上网搜资料显示,使用filter和interceptor都可以实现.不过推荐使用interceptor. 下面就使用Interceptor实现用户登录权限验证功能. 拦截器需要实现Inceptor ...
最新文章
- ICLR2018论文投稿抢先看:Ian Goodfellow由衷赞赏的训练稳定方法SN-GANs
- 我是怎么使用最短路径算法解决动态联动问题的
- mac ssh 安装mysql_mac上安装mysql
- spring cloud feign 加载流程
- Idea打可执行jar包
- C常用的字符串函数实现
- AIX 关键系统文件被清空问题定位过程全记录
- bzoj3224: Tyvj 1728 普通平衡树
- XPS数据分析问题收集及解答
- 小程序中text标签之坑
- linux怎么开启8080端口,Linux中如何开启8080端口供外界访问
- 机器学习中的主动学习实现_我如何使用机器学习来帮助实现正念
- 綫程池 部分代碼實現 筆記
- 如何为SharePoint文档库、文件夹、文件单独设置权限
- Mysql错误check the manual that corresponds to your MySQL server version for the right syntax
- Ubuntu Linux操作系统与实验教程(第二版)答案
- 浅谈iPhone OS(iOS)架构
- 贪心算法(Greedy Algorithms)
- Nico的刷题日记(二)
- Web综合应用案例-限时秒杀效果的制作
热门文章
- eclipse汉化小教程
- matlab电磁场,电磁场与波 电磁材料及MATLAB计算
- 机器狗病毒样本 穿透冰和点还原卡
- 计算机论文数据建模怎么写,建模论文模板_数学建模论文范例_数学建模论文3000字...
- Microsoft Office 2007 Beta 2 下载(含所有的CD-KEY)
- 解决Win7 64位安装 Microsoft .NET Framework 4 失败的情况
- ubuntu下QQ无法登录解决。
- 节奏大师服务器不稳定,节奏大师无法登陆的原因及解决方法
- C#播放视频时与暴风影音冲突的问题
- vs2015安装msdn