<!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>
js 垃圾桶(原生)
最新推荐文章于 2022-08-12 23:10:39 发布