JavaScript实现拖动图片到指定位置验证码

最新推荐文章于 2024-05-21 12:54:29 发布

Leisure_Time

最新推荐文章于 2024-05-21 12:54:29 发布

阅读量1.8k

点赞数 2

分类专栏： JS 文章标签： JavaScript html5

本文链接：https://blog.youkuaiyun.com/weixin_45615791/article/details/103939947

版权

JS 专栏收录该内容

43 篇文章

订阅专栏

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				list-style: none;
			}
			#imgDiv {
				background: url(../img/niubi.jpg) no-repeat;
				width: 750px;
				height: 350px;
				margin: auto;
				position: relative;
			}
			#huaKuai {
				width: 750px;
				height: 45px;
				background: bisque;
				margin: auto;
				border: 1px solid #000000;
				position: relative;
			}
			#huaKuai>div {
				position: absolute;
				width: 75px;
				height: 45px;
				background: darkgray;
				border: 1px solid #000000;
				border-radius: 5px;
				box-shadow: #000000 2px 2px 5px 0px;
				cursor: pointer;
			}
			#divMove {
				position: absolute;
				margin-top: 170px;
				width: 75px;
				height: 75px;
				background: url(../img/niubi.jpg) no-repeat;
				background-size: 750px 350px;
				background-position-y: -170px;
				border: 1px solid red;
				z-index: 2;
			}
			#divDown {
				text-align: center;
				color: white;
				margin-top: 170px;
				position: absolute;
				width: 75px;
				height: 75px;
				border: 1px solid red;
				line-height: 32px;
				background: #000000;
				background-size:750px 350px ;
				background-position-y: -170px;
			}
		</style>
	</head>
	<body>
		<div>
		<div id="imgDiv">
			<div id="divMove"></div>
			<div id="divDown">移动图片到此处</div>
		</div>
		<div id="huaKuai">
			<div></div>
		</div>
		</div>
		<script type="text/javascript">
			let huaKuai = document.querySelector('#huaKuai')
			let huaKuaiDiv = document.querySelector('#huaKuai div')
			let divDown = document.querySelector('#divDown')
			let divMove = document.querySelector('#divMove')
			let time = 0, timeOut
			huaKuai.addEventListener('mousedown',(e)=>{
				if (time == 0) {//如果time等于0则添加定时器
					time == -1
					setIntval()//当鼠标按下时添加定时器
				}
				huaKuai.addEventListener('mousemove',move)//添加鼠标移动事件
			})
			huaKuai.addEventListener('mouseup',(e)=>{//添加鼠标抬起事件
				huaKuai.removeEventListener('mousemove',move)//如果鼠标抬起则取消跟随鼠标移动事件
				if (divMove.offsetLeft >= divDown.offsetLeft -(20) && divMove.offsetLeft < divDown.offsetLeft+(20)) {
					//如果滑块的offsetleft 大于 滑块放置区域的offsetleft 并且 滑块的offsetleft 小于 滑块放置区域的offsetleft 
					//操作div的offsetleft必须大于指定div的offsetleft 如果有-20 则能少,
					//并且 操作div的offsetleft必须小于指定div的左边加上 20 代表着可以多出来边距
					alert('验证成功,'+'您一共用了'+time/10+'秒钟')
					clearInterval(timeOut)//清除定时器
					reStrat()//重置移动,并重新开始
					return time = 0
				}else {
					alert('验证失败')
					clearInterval(timeOut)//清除定时器
					reStrat()
					return time = 0
				}
			})
			function move(e) {
				//setAttribute可以设置style属性
				if (((e.clientX-huaKuai.offsetLeft)-35) >0 && ((e.clientX-huaKuai.offsetLeft)-35) < 675) {//如果滑块left位置小于0则不赋值并且滑块的位置不能大于675
				divMove.setAttribute('style','left:'+((e.clientX-huaKuai.offsetLeft)-35)+'px; background-position-x:'+(-suiJiShu)+'px')
				huaKuaiDiv.setAttribute('style','left:'+((e.clientX-huaKuai.offsetLeft)-35)+'px')
				return false//取消浏览器默认行为,如文字拖动	
				}
			}
			let suiJiShu = Math.floor(Math.random()*750)
			suiJiShu += suiJiShu >580 ? -100: +90
			function reStrat() {//重置
			suiJiShu = Math.floor(Math.random()*750)//生成随机数0-750
			suiJiShu += suiJiShu >580 ? -100: +90//如果随机数大于580就-100否则+90 此做法不会让随机数大于750并且不会小于90
				divMove.setAttribute('style','left:'+0+'px; background-position-x:'+(-suiJiShu)+'px')//将随机数赋值给background-position-x
				huaKuaiDiv.setAttribute('style','left:'+0+'px')//重置滑块的初始位置
				divDown.setAttribute('style','left:'+ suiJiShu + 'px')//将滑块放置处left赋值随机数
				return false//取消浏览器默认行为
			}
			reStrat()
			function setIntval() {
					timeOut = setInterval(()=>{
						console.log(time)
						return time++ ; timeOut
					},100)
			}
		</script>
	</body>
</html>

效果图如下：