js实现拖动滑块验证

最新推荐文章于 2024-07-25 16:29:44 发布

LLL_LH

最新推荐文章于 2024-07-25 16:29:44 发布

阅读量1.4k

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/LLL_liuhui/article/details/97114502

版权

js 专栏收录该内容

78 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>js实现滑块拖动验证</title>
		<style>
			*{margin: 0;padding: 0;}
			.main{width: 400px;height: 50px;line-height: 50px;margin: 50px auto; background: #ccc;position: relative;text-align: center;}
			.btn{width: 48px;height: 48px;border: 1px solid #333;background-color: #fff;position: absolute;left: 0;top: 0;line-height: 48px;z-index: 2;}
			.txt{position: absolute;top: 0;width: 100%;z-index: 1;text-align: center;}
			.bg{width: 0;height: 50px;background-color: #00FFFF;position: absolute;top: 0;}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="btn">&gt;&gt;</div>
			<p class="txt">拖动滑块</p>
			<div class="bg"></div>
		</div>
		<script>
			window.onload=function(){
				var btn = document.querySelector(".btn"); //滑块
				var main = document.querySelector(".main"); //验证框
				var txt = document.querySelector(".txt"); //文字
				var bg = document.querySelector(".bg");  //背景
				var flag = false; 
				//鼠标按下
				btn.onmousedown=function(event){
					var downX = event.clientX; //鼠标按下时距离浏览器左端的距离
					btn.onmousemove=function(event){
						//鼠标移动时距离浏览器左端的距离-刚开始按下时的距离 = 鼠标移动的距离
						var x = event.clientX - downX; 
						//移动的最小距离为0,最大为验证框的宽度-按钮的宽度-按钮边框的宽度
						var maxX = main.offsetWidth - btn.offsetWidth;
						if(x>0){
							this.style.left = x + 'px';
							bg.style.width = x + 'px';
						}
						if(x >= maxX){
							//验证成功
							flag = true;
							txt.innerText = "验证成功";
							//验证成功后清除事件
							this.onmousemove = null;
							this.onmousedown = null;
						}
					}
				};
				//鼠标松开,滑块恢复到一开始时的状态
				btn.onmouseup = function(event){
					//鼠标按下松开后,鼠标的移动事件onmousemove应该被清除
					this.onmousemove = null;
					//先判断验证是否成功
					if(flag) return;
					this.style.left = 0;
					bg.style.width = 0;
				}
			}
		</script>
	</body>
</html>