通过js实现滑块验证（简略版）

Alphamilk

已于 2022-12-13 17:21:18 修改

阅读量2.8k

点赞数

文章标签： html5 css javascript

于 2022-12-13 17:20:38 首次发布

本文链接：https://blog.csdn.net/dogxixi/article/details/128304433

版权

思路：

具体实现过程

整体代码

思路：

1.获取滑块的左位置（使用offsetLeft ）。

2.通过onmousedown,onmousemove,onmouseup实现获取鼠标位置(使用clientX)。

3.通过鼠标获取到的位置和滑块原位置之间的偏差值赋予滑块位置实现滑块的运动。

4.判断滑块是否到达终点，若到达则固定位置，未到达则回到初始位置。

具体实现过程

1.body 内容

2.获取元素（dom对象）

3.js实现（*）

1.通过点击事件获取滑块最初的位置。

2.设置flag（用于判断滑块是否到达终点）。

3.使用onmousedown获取初始位置并且设置flag=1(意味着可以执行onmousemove)。

3.使用嵌套onmousemove获取鼠标位置，并且算出偏移量padding并赋予滑块实现滑块的移动

并且判断是否到达终点，若到达则固定位置。

4。当鼠标抬起即onmousemove 时候flag = 0（禁止使用onmousemove）然后判断是否到达终点如果未到达则恢复初始状态，即需要重新移动到终点。

<script>
		var slider = document.getElementById("slider");
		var img = document.getElementById("imgs");
		var container = document.getElementById("container");
		var flag = 0;
		
		
		
		slider.onmousedown = function(event){
			var event = event || window.event;
			var clientx = event.clientX;
			var testx = slider.offsetLeft;
			var initposition = event.clientX;
			// 获取初始位置
			flag = 1;
			// flag判断是否到达终点
			
			 slider.onmousemove = function testone(event){
				 if(flag == 1){
					 
					 var event = event || window.event;
					  var testx = slider.offsetLeft;
					  var padding = event.clientX-initposition;
					  //计算偏移量
					  
					  if(testx>=450){
						slider.style.left = 450+"px";
						img.src = "成功.png";
						container.style.backgroundColor = "green";
					  }else if(testx <10){
						  slider.style.left = 10+"px";
					  }else{
						  slider.style.left = padding+"px";
					  }//判断滑块是否到达终点
					
				 }
				
			}
			slider.onmouseup = function(){
			  flag  = 0;
			  //当鼠标点击抬起时，禁止使用onmousemove
			  if(testx<450){
				  slider.style.left = 0+"px";
				  console.log("执行");
				  console.log(testx);
				  img.src = "前进.png";
				  container.style.backgroundColor = "gray";
				  //未到达终点则1.重置背景2.恢复初始位置
			  }else{
				  slider.style.left = 450+"px";
			  }
			}
			
			
		}
		
	</script>

效果图：

整体代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		 *{
		        padding:0;
		        margin:0;
		    }
		img{
			width: 50px;
			height: 50px;
			}
		
		
		#slider{
			width: 50px;
			height: 50px;
			border: 1px solid;
			background-color: white;
			position: absolute;
			text-align: center;
			line-height: 50px;
			font-size: 25px;
			float: left;
			z-index: 11;
			box-sizing:border-box;
		}
		#container{
		position:absolute;
		width:500px;
		height: 50px;
		background-color: gray;
		z-index: -1;
		margin-top: 200px;
		margin-left: 200px;
		}
		
		
	</style>
	<body>
		
				<div id="container">
					<div id="slider"><img src="./前进.png" alt="" draggable="false" id="imgs"></div></div>
		
	</body>
	<script>
		var slider = document.getElementById("slider");
		var img = document.getElementById("imgs");
		var container = document.getElementById("container");
		var flag = 0;
		
		
		
		slider.onmousedown = function(event){
			var event = event || window.event;
			var clientx = event.clientX;
			var testx = slider.offsetLeft;
			var initposition = event.clientX;
			// 获取初始位置
			flag = 1;
			// flag判断是否到达终点
			
			 slider.onmousemove = function testone(event){
				 if(flag == 1){
					 
					 var event = event || window.event;
					  var testx = slider.offsetLeft;
					  var padding = event.clientX-initposition;
					  //计算偏移量
					  
					  if(testx>=450){
						slider.style.left = 450+"px";
						img.src = "成功.png";
						container.style.backgroundColor = "green";
					  }else if(testx <10){
						  slider.style.left = 10+"px";
					  }else{
						  slider.style.left = padding+"px";
					  }//判断滑块是否到达终点
					
				 }
				
			}
			slider.onmouseup = function(){
			  flag  = 0;
			  //当鼠标点击抬起时，禁止使用onmousemove
			  if(testx<450){
				  slider.style.left = 0+"px";
				  console.log("执行");
				  console.log(testx);
				  img.src = "前进.png";
				  container.style.backgroundColor = "gray";
				  //未到达终点则1.重置背景2.恢复初始位置
			  }else{
				  slider.style.left = 450+"px";
			  }
			}
			
			
		}
		
	</script>
</html>