js 垃圾桶(原生)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
			<style type="text/css">
				.mis{width: 100px;
					height: 100px;
					border: 1px solid red;
					text-align: center;
					line-height: 100px;
					margin-top: 20px;
					position: absolute;
				}
				#max{
					width: 100px;
					height: 100px;
					background-color: black;
					line-height: 220px;
					text-align: center;
					position: absolute;
					left: 400px;
					top: 300px;
					
				}
				#da{
					width: 800px;
					height:650px;
					border: 1px solid;
					position: relative;
				}
				#sfsc{
					position: absolute;
					width: 100px;
					height: 30px;
					background-color: aquamarine;
					left: 400px;
					top: 260px;
					text-align: center;
				}
			</style>
	</head>
	<body>
			<div id="da">
				
			
			<div id="max">垃圾桶</div>	
			<div id="sfsc"></div>
				
			
			<div class="mis"></div>
			<div class="mis"></div>
			<div class="mis"></div>
			<div class="mis"></div>
			<div class="mis"></div>
			</div>
		<script type="text/javascript">
			var mis=document.getElementsByClassName("mis");
				function sjs(){
					return Math.floor(Math.random()*(255-150)+150)
				}	
				var sum=0;
				for (var i=0; i<mis.length; i++) {
					mis[i].innerText=i+1;
					
					mis[i].style.top=sum+"px";
					sum+=120;
					
					mis[i].style.backgroundColor='rgb('+sjs()+','+sjs()+','+sjs()+')';
				}
				
				
				for (var i=0; i<mis.length; i++) {
					mis[i].onmousedown=function(ev){
						var ev=ev||window.event
						var x=ev.clientX-this.offsetLeft;
						var y=ev.clientY-this.offsetTop;
						
						var set=this;
						
						document.onmousemove=function(ev){
							var ev=ev||window.event
							
							set.style.left=(ev.clientX-x)+"px";
							set.style.top=(ev.clientY-y)+"px";
//							hanshu(set);
						}
						document.onmouseup=function(){
							document.onmousemove=null;
							document.onmouseup=null;
							
							hanshu(set);
						}				
					}	
				}
				laji=document.getElementById("max");
				//提示是否删除
				sfsc=document.getElementById("sfsc");
				//检测碰撞封装成一个函数
				//需要检测谁就把谁传入函数
				function hanshu(set){
					//获取移动视图的  左  右  上  下  的位置
					
					var moveL=set.offsetLeft;
					var moveR=set.offsetLeft+set.offsetWidth;
					var moveT=set.offsetTop;
					var moveX=set.offsetTop+set.offsetHeight;
					
					//获取被撞视图的 左  右  上  下  位置
					var hitL=laji.offsetLeft;
					var hitR=laji.offsetLeft+laji.offsetWidth;
					var hitT=laji.offsetTop;
					var hitX=laji.offsetTop+laji.offsetHeight;
					
					//定义检测是否碰撞的条件
					var p1=moveR>=hitL;
					var p2=moveL<=hitR;
					var p3=moveT<=hitX;
					var p4=moveX>=hitT;
					
					console.log("左移动"+moveL);
					console.log("右固定"+hitT);
					if (p1 && p2  && p3 &&  p4) {
						laji.style.backgroundColor="green";	
						set.style.display="none";
						sfsc.innerHTML=set.innerText;
	
					} 

				}
	
		</script>
	</body>
</html>
Jason–json
发布了96 篇原创文章 · 获赞 26 · 访问量 7305
私信关注
猜你喜欢
