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 相关文章推荐
var与Javascript变量隐式声明
Sep 17 Javascript
js选项卡的实现方法
Feb 09 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
Ionic3实现图片瀑布流布局
Aug 09 Javascript
JS判断用户用的哪个浏览器实例详解
Oct 09 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
使用apifm-wxapi快速开发小程序过程详解
Aug 05 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
原生js实现文件上传、下载、封装等实例方法
Jan 05 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分页函数
2006/10/09 PHP
php网页病毒清除类
2014/12/08 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
getElementById在任意一款浏览器中都可以用吗的疑问回复
2007/05/13 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
jQuery对val和atrr(&quot;value&quot;)赋值的区别介绍
2014/09/26 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
jquery+json实现分页效果
2016/03/07 Javascript
图片上传之FileAPI与NodeJs
2017/01/24 NodeJs
JS获得一个对象的所有属性和方法实例
2017/02/21 Javascript
详谈DOM简介及节点、属性、查找节点的方法
2017/11/16 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
详解关于微信setData回调函数中的坑
2019/02/18 Javascript
微信小程序实现页面分享onShareAppMessage
2019/08/12 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
2020/12/02 Vue.js
[00:36]DOTA2上海特级锦标赛 Alliance战队宣传片
2016/03/04 DOTA
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
python制作mysql数据迁移脚本
2019/01/01 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
Django多数据库的实现过程详解
2019/08/01 Python
python写入数据到csv或xlsx文件的3种方法
2019/08/23 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
2015年敬老月活动总结
2015/03/27 职场文书
通知函的格式
2015/04/27 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
MySQL分区表实现按月份归类
2021/11/01 MySQL
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers