javaScript拖动验证

最新推荐文章于 2024-03-21 22:40:56 发布

qq_1534741136

最新推荐文章于 2024-03-21 22:40:56 发布

阅读量141

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/qq_39008487/article/details/96910537

版权

javaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<style type="text/css">
	#box{
		width:200px;
		height: 35px;
		margin:  0 auto;
		position: relative;
		box-sizing: border-box;
		border: 1px solid #ccc;
	}
	.bg{
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		background-color: green;
	}
	.btn{
		position: absolute;
		top:0;
		left: 0;
		width: 100%;
		height: 100%;
		width: 50px;
		box-sizing: border-box;
		border: 1px solid #ccc;
		background-color: #333;
	}
	.text{
		line-height: 35px;
		text-align: center;
		color: red;
		position: absolute;
		width: 100%;
	}
</style>
<body>
	<div id="box">
		<div class="bg"></div>
		<div class="text">拖动验证</div>
		<div class="btn"></div>
	</div>

</body>
<script type="text/javascript">
	function init(){
		var btn = document.querySelector('.btn');
		var bg = document.querySelector('.bg');
		var text = document.querySelector('.text');
		var width = document.querySelector('#box').offsetWidth;
		var maxLeft = document.querySelector('#box').offsetWidth - btn.offsetWidth;
		var startX = 0;	
		var isDown = false;
		function mousedown(e){
			startX  = e.clientX;
			isDown = true;
		}

		function mousemove(e){
			if(!isDown) return false;
			var left  = e.clientX - startX;
			if(left > 0){
				btn.style.left = left + 'px';
				bg.style.width = left + 'px';
				if(left >= maxLeft){
					text.innerText = '验证通过';
					text.style.color = '#fff';
					remove();
				}
			}
		}

		function remove(){
			btn.removeEventListener('mousedown',mousedown,null);
			document.removeEventListener('mousemove',mousemove,null);
			document.removeEventListener('mouseup',mouseup,null);
		}

		function mouseup (e){
			var clientX = e.clientX - startX;
			if(clientX < maxLeft){
				isDown = false;
				btn.style.left = 0 + 'px';
				bg.style.width = 0 + 'px';
			}else{
				remove();
			}
		}

		btn.addEventListener('mousedown',mousedown,null);
		document.addEventListener('mousemove',mousemove,null);
		document.addEventListener('mouseup',mouseup,null)
	}
	document.addEventListener('readystatechange',init,null)
</script>
</html>

封装后

	function Drag(conf){
		this.btn = this.getDom(conf.btn);
		this.bg = this.getDom(conf.bg);
		this.text = this.getDom(conf.text);
		this.box  = this.getDom(conf.box );
		this.width = this.box.offsetWidth;
		this.maxLeft = this.getDom(conf.box).offsetWidth - this.btn.offsetWidth;
		this.startX = 0;	
		this.isDown = false;
		this.success = typeof  conf.success == 'function' ? conf.success : null;

		this.mousedown = this.mousedown.bind(this);
		this.mousemove = this.mousemove.bind(this);
		this.mouseup = this.mouseup.bind(this);
		this.remove = this.remove.bind(this);

		this.btn.addEventListener('mousedown',this.mousedown,null);
		document.addEventListener('mousemove',this.mousemove,null);
		document.addEventListener('mouseup',this.mouseup,null)
	}
	Drag.prototype = {
		getDom:document.querySelector.bind(document),
		getDomAll:document.querySelectorAll.bind(document),
		mousedown:function (e){
			this.startX  = e.clientX;
			this.isDown = true;
		},
		mousemove:function (e){
			if(!this.isDown) return false;
			var left  = e.clientX - this.startX;
			if(left > 0){
				this.btn.style.left = left + 'px';
				this.bg.style.width = left + 'px';
				if(left >= this.maxLeft){
					this.text.innerText = '验证通过';
					this.text.style.color = '#fff';
					this.remove();
				}
			}
		},
		remove:function (){
			this.isDown = false;
			this.btn.removeEventListener('mousedown',this.mousedown,null);
			document.removeEventListener('mousemove',this.mousemove,null);
			document.removeEventListener('mouseup',this.mouseup,null);
			if(this.success != null){
				this.success();
			}
		},
		mouseup:function (e){
			var clientX = e.clientX - this.startX;
			if(clientX < this.maxLeft){
				this.isDown = false;
				this.btn.style.left = 0 + 'px';
				this.bg.style.width = 0 + 'px';
			}else{
				//this.remove.call(this);
			}
		}
	}

	function init(){
		var drag = new Drag({
			box:'#box',
			btn:'.btn',
			bg:'.bg',
			text:'.text',
			success:function(){
				console.log('验证成功')
			}
		});
	}
	document.addEventListener('readystatechange',init,null)