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 相关文章推荐
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
js下用gb2312编码解码实现方法
Dec 31 Javascript
js下用eval生成JSON对象
Sep 17 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
红米手机抢购的js代码
Mar 10 Javascript
js style动态设置table高度
Oct 21 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 Javascript
浅谈JavaScript find 方法不支持IE的问题
Sep 28 Javascript
JS实现验证码倒计时的注册页面
Jan 02 Javascript
Vue中&quot;This dependency was not found&quot;问题的解决方法
Jun 19 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 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
层叠菜单的动态生成
2006/10/09 PHP
simplehtmldom Doc api帮助文档
2012/03/26 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
实例讲解PHP表单验证功能
2019/02/15 PHP
Prototype Template对象 学习
2009/07/19 Javascript
Jquery异步请求数据实例代码
2011/12/28 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
jQuery动态设置form表单的enctype值(实现代码)
2013/07/04 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
JS动态添加iframe的代码
2015/09/14 Javascript
很全面的JavaScript常用功能汇总集合
2016/01/22 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
2016/05/27 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
Python strip lstrip rstrip使用方法
2008/09/06 Python
Django中URL视图函数的一些高级概念介绍
2015/07/20 Python
使用Python批量修改文件名的代码实例
2019/01/24 Python
windows下Python安装、使用教程和Notepad++的使用教程
2019/10/06 Python
使用pandas 将DataFrame转化成dict
2019/12/10 Python
python递归调用中的坑:打印有值, 返回却None
2020/03/16 Python
python字典的值可以修改吗
2020/06/29 Python
通过实例解析Python RPC实现原理及方法
2020/07/07 Python
女士时装鞋:Chinese Laundry
2018/08/29 全球购物
个人优缺点自我评价
2014/01/27 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
总经理助理的职责
2014/03/14 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书
2015年度保密工作总结
2015/04/24 职场文书
电力工程合作意向书
2015/05/11 职场文书
鲁滨逊漂流记读书笔记
2015/06/26 职场文书
干货:我将这样书写我的演讲稿!
2019/05/09 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书
解析MySQL binlog
2021/06/11 MySQL
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis