html验证码 按住向右滑动,js实现滑动滑块验证登录
本文实例为大家分享了js实现滑动滑块验证登录的具体代码,供大家参考,具体内容如下
1.html代码
拖动滑块验证
2.css样式
最大的盒子相对定位,其他内部内容绝对定位
需要根据层级设置z-index保证滑动的正常使用
.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;
}
.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;*/
}
.bg{
position: absolute;
height: 100%;
background-color: yellowgreen;
z-index: 1;
}
样式
3.js事件
分析使用过程:按住滑块并拖动可以移动,中途松开滑块返回起始位置,拖动至最后滑块不动
分析动作:
1.按钮按下并移动
2.事件状态:event对象(鼠标位置)event.clientX获得与X轴的距离
3.松开按钮回到原处
4.结束,松开按钮,按钮不可再次拖动
1)
var btn=document.querySelector(".btn");
var box=document.querySelector(".box");
var bg=document.querySelector(".bg");
var text=document.querySelector(".text");
或者使用封装选择器
function $(name){
return document.querySelector(name);
};
var box=$(".box"),btn=$(".btn").....;
2)按下
按下后获得与x轴的距离
btn.οnmοusedοwn=function(e){
var downX=e.clientX;
3)拖动
拖动后获得与x轴距离减去初始值距离得到按钮移动的值
根据移动的值:判断按钮是否可以正常移动,判断按钮是否已经完成验证
btn.οnmοusemοve=function(e){
var moveX=e.clientX-downX;
// 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.οnmοusedοwn=null;
btn.οnmοusemοve=null;
}
}
4)松开按钮
回到原处清除拖动
btn.οnmοuseup=function(){
//事件清除
btn.οnmοusemοve=null;
if(flag)return;
this.style.left=0;//将移动值赋值给滑块
bg.style.width=0;//背景
}
4.效果
5.源码
//原生写法
window.οnlοad=function(){
var btn=document.querySelector(".btn");
var box=document.querySelector(".box");
var bg=document.querySelector(".bg");
var text=document.querySelector(".text");
//封装选择器
// function $(name){
// return document.querySelector(name);
// };
// var box=$(".box"),btn=$(".btn").....;
var flag=false;
//按下onmousedown 拖动onmousemove
//document.querySelector(".btn").οnmοusedοwn=function(event){//event事件状态
// var e=event||window.event;
//获取方法集合,可直接通过id, 类, 类型, 属性, 属性值等来选取元素(返回此名字的第一个)。
btn.οnmοusedοwn=function(e){//按下
var downX=e.clientX; //按下后对x轴的距离
// console.log(downX);
// alert("1");
btn.οnmοusemοve=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.οnmοusedοwn=null;
btn.οnmοusemοve=null;
}
}
}
}
//松开按钮
btn.οnmοuseup=function(){
//事件清除
btn.οnmοusemοve=null;
if(flag)return;
this.style.left=0;//将移动值赋值给滑块
bg.style.width=0;//背景
}
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
html验证码 按住向右滑动,js实现滑动滑块验证登录相关推荐
- 前端JS——滑动滑块验证登录(源码及效果)
源码: <!doctype html> <html lang="en"><head><meta charset="UTF-8&q ...
- [验证码识别技术]-初级的滑动式验证图片识别
初级的滑动式验证图片识别方案 1 abstract 验证码作为一种自然人的机器人的判别工具,被广泛的用于各种防止程序做自动化的场景中.传统的字符型验证安全性已经名存实亡的情况下,各种新型的验证码如雨后 ...
- Java滑动验证_自动滑块验证登录QQ-java实现
之前,我用php配合java写了一个qq群签到的脚本.需要手动更新cookie,很烦. 最近学习刷题过程中,碰到了很多事情,很烦.就准备写几天代码,把之前的脚本,完整的只用java来实现,顺便平复一下 ...
- 原生js实现拖动滑块验证
拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...
- python模拟滑动滑块验证
滑动滑块的两个关键点为:(1)生成滑动轨迹(2)控制滑动按钮进行滑动 (1)根据要滑动的距离生成滑动轨迹,此处是模拟人为滑动:先加速滑动滑块,再减速滑动滑块.代码如下: 其中distance参数就是要 ...
- Selenium滑块验证登录天猫淘宝网站
模拟登录天猫和淘宝网址,直接跳过滑块验证的方法. import timefrom selenium.webdriver import Chrome from selenium.webdriver im ...
- 纯HTML和JS实现拖动滑块验证效果
效果展示: 代码: index.html <!DOCTYPE html> <html lang="en"><head><meta char ...
- python网络爬虫抹除webdriver指纹绕过淘宝滑块验证登录
对于爬虫工程师,最常遇到的需求就是抓取电商网站的数据,那么电商数据最受哪些公司平台的注意呢?以下是几个例子 广告商:广告商透过爬虫定期抓取你店铺的数据,并对店铺包括销量,热度,好评,新上线产品好评度, ...
- Python使用selenium模拟滑块验证登录12306网站 实测可用
Python使用selenium模拟登录12306网站(根据12306的更新编写的2022年4月最新方法)实测可用 from selenium import webdriver from time i ...
- 12306滑块验证登录分析
1.检测登录验证 请求 URL: https://kyfw.12306.cn/passport/web/checkLoginVerify 请求方法: POST 状态代码: 200 OK 请求表单 us ...
最新文章
- 解决mysql无法远程登陆问题
- iOS正则匹配手机号
- Java客户端操作elasticsearch--查询索引库
- 【渝粤题库】陕西师范大学200641高等数学作业(高起专、专升本)
- Java实体对象为什么一定要实现Serializable接口呢?
- LeetCode 109. 有序链表转换二叉搜索树
- c语言程序输出一个桌子图案,几道程序题,请高手帮帮忙吧
- linux共享内存变量 tiaojianbianliang,低压集抄系统中Linux共享内存使用分析
- SAP License:药店ERP系统如何实施
- python自动化测试工具开发_Python+Selenium自动化测试教程连载(2)
- 关于程序化交易的点点知识
- Linux下安装禅道
- B1105 Spiral Matrix (画图)
- CMD和AMD的区别
- echart结合高德地图的数据可视化大数据展示平台模板
- 输入两个正整数,求其最大公约数。
- C# 加减乘除计算器
- 华为手机摄影从入门到精通_华为手机拍照技巧从入门到精通
- 集中进计算机系统仪表,美国仪表学会标准 分散控制集中显示仪表、逻辑控制及计算机系统用流程图符号ISA-5.3.doc...
- 电话号码正则表达式!