js实现滑动滑块验证登录


Posted in Javascript onJuly 24, 2020

本文实例为大家分享了js实现滑动滑块验证登录的具体代码,供大家参考,具体内容如下

1.html代码

<div class="box">
 <!--滑块-->
 <a href="#" rel="external nofollow" ><div class="btn">>></div></a>
 <!--文字-->
 <p class="text">拖动滑块验证</p>
 <!--背景-->
 <div class="bg"></div> 
</div>

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;
}

样式

js实现滑动滑块验证登录

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.onmousedown=function(e){
  var downX=e.clientX;

3)拖动

拖动后获得与x轴距离减去初始值距离得到按钮移动的值
根据移动的值:判断按钮是否可以正常移动,判断按钮是否已经完成验证

btn.onmousemove=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.onmousedown=null;
 btn.onmousemove=null;
 }
 }

4)松开按钮

回到原处清除拖动

btn.onmouseup=function(){ 
 //事件清除
  btn.onmousemove=null;
  if(flag)return;
  this.style.left=0;//将移动值赋值给滑块
 bg.style.width=0;//背景
 
 }

4.效果

js实现滑动滑块验证登录

5.源码

//原生写法
window.onload=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").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;//背景
 
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
brook javascript框架介绍
Oct 10 Javascript
禁用Tab键JS代码兼容Firefox和IE
Apr 18 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
Vue实现按钮旋转和移动位置的实例代码
Aug 09 Javascript
vue项目中跳转到外部链接的实例讲解
Sep 20 Javascript
浅谈ng-zorro使用心得
Dec 03 Javascript
JS实现的合并两个有序链表算法示例
Feb 25 Javascript
详解vue项目打包步骤
Mar 29 Javascript
Vue基本使用之对象提供的属性功能
Apr 30 Javascript
JavaScript实现拖拽盒子效果
Feb 06 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
Oct 21 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 #Javascript
对vuex中store和$store的区别说明
Jul 24 #Javascript
小程序实现简单语音聊天的示例代码
Jul 24 #Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 #Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 #Javascript
javascript实现支付宝滑块验证码效果
Jul 24 #Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 #Javascript
You might like
php中常用编辑器推荐
2007/01/02 PHP
那些年一起学习的PHP(一)
2012/03/21 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
php自动识别文件编码并转换为UTF-8的方法
2014/06/12 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
在Mac OS下搭建LNMP开发环境的步骤详解
2017/03/10 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
JQuery live函数
2010/12/24 Javascript
基于jquery的表头固定的若干方法
2011/01/27 Javascript
如何在JavaScript中实现私有属性的写类方式(二)
2013/12/04 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
jquery.post用法之type设置问题
2014/02/24 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
2016/08/11 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
Vue.js如何实现路由懒加载浅析
2017/08/14 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
Preload基础使用方法详解
2020/02/03 Javascript
Node.js API详解之 net模块实例分析
2020/05/18 Javascript
Ant Design的Table组件去除
2020/10/24 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
python实现杨氏矩阵查找
2019/03/02 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
python实现邮件发送功能
2019/08/10 Python
Pandas替换及部分替换(replace)实现流程详解
2020/10/12 Python
课外科技活动总结
2014/08/27 职场文书
婚前保证书范文
2015/02/28 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
营运督导岗位职责
2015/04/10 职场文书
2015年社区综治工作总结
2015/04/21 职场文书
详解Go语言Slice作为函数参数的使用
2021/07/02 Golang