前端JS——滑动滑块验证登录（源码及效果）

最新推荐文章于 2024-07-26 15:12:30 发布

梁同学与Android

最新推荐文章于 2024-07-26 15:12:30 发布

阅读量901

点赞数

分类专栏： JS 文章标签：前端JS——滑动滑块验证登录（源码及效果）

原文链接：https://blog.csdn.net/qq_41141657/article/details/96905371

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

源码:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <style>
	.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;
	-webkit-user-select:none;

   -moz-user-select:none;

   -ms-user-select:none;

   user-select:none;
}
.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;*/
	-webkit-user-select:none;

   -moz-user-select:none;

   -ms-user-select:none;

   user-select:none;
}
.bg{
	position: absolute;
	height: 100%;
	background-color: yellowgreen;
	z-index: 1;
}

  </style>
 </head>
 <body>
	<div class="box">
			<!--滑块-->
			<div id="a" class="btn">>></div>
			<!--文字-->
			<p id="b"class="text">拖动滑块验证</p>
			<!--背景-->
			<div id="c"class="bg"></div>			
	</div>

 </body>

 <script>
	//原生写法
window.onload=function(){
	var btn=document.querySelector(".btn");
	var box=document.querySelector(".box");
	var bg=document.querySelector(".bg");
	var text=document.querySelector(".text");

	a.onmouseover = function(){

	this.style.cursor = 'pointer';

	}
	b.onmouseover = function(){

	this.style.cursor = 'pointer';

	}
	c.onmouseover = function(){

	this.style.cursor = 'pointer';

	}

	//封装选择器
//	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;//背景
		
	}
}

 </script>
</html>