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 相关文章推荐
Save a File Using a File Save Dialog Box
Jun 18 Javascript
node.js中的fs.fchmodSync方法使用说明
Dec 16 Javascript
javascript动态创建及删除元素的方法
Dec 22 Javascript
JavaScript检测实例属性, 原型属性
Feb 04 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
js实现PC端和移动端刮卡效果
Mar 27 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
Vue中android4.4不兼容问题的解决方法
Sep 04 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 Javascript
vue-cli在 history模式下的配置详解
Nov 26 Javascript
JavaScript常用8种数组去重代码实例
Sep 09 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 中文和编码判断代码
2010/05/16 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
PHP实现搜索相似图片
2015/09/22 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
9个比较实用的php代码片段
2016/03/15 PHP
PHP观察者模式实例分析【对比JS观察者模式】
2019/05/22 PHP
PHP基于timestamp和nonce实现的防止重放攻击方案分析
2019/07/26 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
jQuery实现可展开合拢的手风琴面板菜单
2015/09/15 Javascript
学习JavaScript设计模式之观察者模式
2020/04/22 Javascript
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
2017/05/13 jQuery
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
Vue.js在数组中插入重复数据的实现代码
2017/11/17 Javascript
js+canvas实现验证码功能
2020/09/21 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
Vue函数式组件的应用实例详解
2019/08/30 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
python连接mysql调用存储过程示例
2014/03/05 Python
python计算时间差的方法
2015/05/20 Python
Python键盘输入转换为列表的实例
2018/06/23 Python
钉钉群自定义机器人消息Python封装的实例
2019/02/20 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
详解Python中的分支和循环结构
2020/02/11 Python
python deque模块简单使用代码实例
2020/03/12 Python
pandas数据拼接的实现示例
2020/04/16 Python
大学毕业感言
2014/01/10 职场文书
公务员政审个人鉴定
2014/02/25 职场文书
活动总结范文
2014/08/30 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
钳工实训报告总结
2014/11/04 职场文书
英语辞职信范文
2015/02/28 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
spring 项目实现限流方法示例
2022/07/15 Java/Android