JavaScript滑块验证

最新推荐文章于 2024-06-23 21:44:55 发布

qianlingvip

最新推荐文章于 2024-06-23 21:44:55 发布

阅读量353

点赞数

分类专栏： js html 文章标签： js html 滑块

本文链接：https://blog.csdn.net/zhangqling/article/details/103277918

版权

js 同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

html

6 篇文章 0 订阅

订阅专栏

效果图：

简单粗暴，直接上代码，无需解释

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8"/>
	<title>拖动验证</title>
	<style>
		@font-face {
		  font-family: 'iconfont';
		  src: url('./font/iconfont.eot');
		  src: url('./font/iconfont.eot?#iefix') format('embedded-opentype'),
	      url('./font/iconfont.woff2') format('woff2'),
	      url('./font/iconfont.woff') format('woff'),
	      url('./font/iconfont.ttf') format('truetype'),
	      url('./font/iconfont.svg#iconfont') format('svg');
		}
		.iconfont {
		  font-family: "iconfont" !important;
		  font-size: 26px;
		  font-style: normal;
		  -webkit-font-smoothing: antialiased;
		  -moz-osx-font-smoothing: grayscale;
		}
		.box{
			position: relative;
			margin:20px auto;
			width: 400px;
			user-select: none;
		}
		.box button,.box p,.box div{
			position: absolute;
			top:0;
			left:0;
		}
		.box button{
			z-index: 9;
			height: 60px;
			width: 70px;
			position: relative;
			cursor: pointer;
		}
		.box p{
			left: 50%;
			transform: translateX(-50%);
			z-index: 7;
			color:#fff;
		}
		.box div{
			background: blue;
			height: 60px;
			width: 400px;
		}
		.box .upBg{
			background-color: purple;
			height: calc(100% - 1px);
			width: 0;
			z-index: 6;
		}
	</style>
</head>
<body>
	<div class="box">
		<button class="btn iconfont">&#xe83e;</button>
		<p class="text">拖动滑块验证</p>
		<div class="bg"></div>
		<div class="upBg"></div>
	</div>
	<script>
		window.onload=function(){
			function getStyle(obj,attr){
				if(window.getComputedStyle){
					return getComputedStyle(obj,null)[attr];
				}else{
					return obj.currentStyle[attr];
				}
			}
			let oText=document.querySelector('.text');
			let oBtn=document.querySelector('.btn');
			let oBg=document.querySelector('.bg');
			let oUpBg=document.querySelector('.upBg');
			let max=parseInt(getStyle(oBg,'width'))-parseInt(getStyle(oBtn,'width'));
			console.log(max,'最大')
			let min=0;
			let flag=false;
			oBtn.onmousedown=function(ev){
				oEvent=ev || event;
				let disX=oEvent.clientX-oBtn.offsetLeft;
				let disY=oEvent.clientY-oBtn.offsetTop;
				document.onmousemove=function(ev){
					oEvent=ev || event;
					let l=oEvent.clientX-disX;
					let t=oEvent.clientY-disY;
					oBtn.style.left=l+'px';
					// oBtn.style.top=t+'px';
					if(l>=max){
						oBtn.style.left=max+'px';
						oText.innerHTML='验证通过';
						oText.style.color='orange';
						oUpBg.style.width=max+'px';
						flag=true;
						document.onmousemove=null;
					}else if(l<min){
						oBtn.style.left=min+'px';
					}else{
						oBtn.style.left=l+'px';
						oUpBg.style.width=l+6+'px';
					}
				}
				document.onmouseup=function(){
					document.onmousemove=null;
					document.onmousedown=null;
					if(flag){
						oBtn.onmousedown=null;
						return;
					}else{
						oUpBg.style.width=0;
						oBtn.style.left=0;
					}
				}
			}
		}
	</script>
</body>
</html>

qianlingvip

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript滑块验证

效果图：简单粗暴，直接上代码，无需解释<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"/> <title>拖动验证</title> <style> @font-face { font-family: 'icon...
复制链接

扫一扫

专栏目录