通过移动 div 更改颜色答案

【问题标题】：Change Color by moving the div通过移动 div 更改颜色
【发布时间】：2020-12-15 09:23:34
【问题描述】：

我有一个问题。所以，我有 3 个带背景的 div 和另外 3 个带边框的 div。我必须将带有红色背景的 div #1 移动到没有背景的 div 中。如果带有红色背景的 div 与带有红色边框的 div 匹配，则它应该以红色背景着色。请看代码。我被卡住了，因为我无法让 div 改变颜色。

let allDivs = document.querySelectorAll("#dd")
dd.addEventListener("click" , function(){
  red.addEventListener("mousemove" , e=>{
    red.style.left = e.clientX - 25 + "px"
    red.style.top = e.clientY - 25 + "px"
  })
  blue.addEventListener("mousemove", e=>{
    blue.style.left = e.clientX - 25 + "px"
    blue.style.top = e.clientY - 25 + "px"
  })
  green.addEventListener("mousemove", e=>{
    green.style.left = e.clientX - 25 + "px"
    green.style.top = e.clientY - 25 + "px"
  })
})

 #dd{
    width: 100%;
    height: 100%;
    display: inline-block;
    }
  #red{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;
    position: absolute;
  }
  #blue{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: blue;
    position: absolute;

  }
  #green{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: green;
    position: absolute;

  }
  #red1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid red;
    margin-left: 300px;
  }
  #blue1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid blue;
    margin-left: 300px;
  }
  #green1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid green;
    margin-left: 300px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="dd">
        <div id="red"></div>
        <div id="red1"></div>
        <div id="blue"></div>
        <div id="blue1"></div>
        <div id="green"></div>
        <div id="green1"></div>
      </div>
      </body>
</html>

【问题讨论】：

不能用js吗？
什么意思？没看到JS吗？
您写道：如果带有红色背景的 div 与带有红色边框的 div 匹配，则它应该以红色背景着色。 nackground 是红色的，你想把它改成红色
@AramayisYeghiazaryan，你愿意接受 jQuery 解决方案吗？
Nikhil Patil nooo，只有香草 JS

标签： javascript html css

【解决方案1】：

这是一个简单的方法，based on this：

let allDivs = document.querySelectorAll("#dd")
let red1rect = document.getElementById("red1").getBoundingClientRect();
let blue1rect = document.getElementById("blue1").getBoundingClientRect();
let green1rect = document.getElementById("green1").getBoundingClientRect();

dd.addEventListener("click" , function(){
  red.addEventListener("mousemove" , e=>{
    red.style.left = e.clientX - 25 + "px"
    red.style.top = e.clientY - 25 + "px"
    checkMatch(red);
  })
  blue.addEventListener("mousemove", e=>{
    blue.style.left = e.clientX - 25 + "px"
    blue.style.top = e.clientY - 25 + "px"
    checkMatch(blue);
  })
  green.addEventListener("mousemove", e=>{
    green.style.left = e.clientX - 25 + "px"
    green.style.top = e.clientY - 25 + "px"
    checkMatch(green);
  })
})

function checkMatch(moving) {
   let movingrect = moving.getBoundingClientRect();
   
   if(!(movingrect.right < red1rect.left || 
        movingrect.left > red1rect.right || 
        movingrect.bottom < red1rect.top || 
        movingrect.top > red1rect.bottom)) {
      moving.style.backgroundColor = "red";
      return;
   } else if(!(movingrect.right < blue1rect.left || 
        movingrect.left > blue1rect.right || 
        movingrect.bottom < blue1rect.top || 
        movingrect.top > blue1rect.bottom)) {
      moving.style.backgroundColor = "blue";
      return;
   } else if(!(movingrect.right < green1rect.left || 
        movingrect.left > green1rect.right || 
        movingrect.bottom < green1rect.top || 
        movingrect.top > green1rect.bottom)) {
      moving.style.backgroundColor = "green";
      return;
   } else {
      moving.style.backgroundColor = null;
   };   
};

#dd{
    width: 100%;
    height: 100%;
    display: inline-block;
    }
  #red{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;
    position: absolute;
  }
  #blue{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: blue;
    position: absolute;

  }
  #green{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: green;
    position: absolute;

  }
  #red1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid red;
    margin-left: 300px;
  }
  #blue1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid blue;
    margin-left: 300px;
  }
  #green1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid green;
    margin-left: 300px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="dd">
        <div id="red"></div>
        <div id="red1"></div>
        <div id="blue"></div>
        <div id="blue1"></div>
        <div id="green"></div>
        <div id="green1"></div>
      </div>
      </body>
</html>

当每个元素移动时，您使用getBoundingClientRect() 获取元素的位置并将其与另一个 div 的位置进行比较，以确定它是否重叠，如果重叠则更改颜色，否则更改回来。

【讨论】：

【解决方案2】：

你可以使用下面的函数来检查碰撞 -

function getDistance(obj1,obj2){
   Obj1Center=[obj1.left+obj1.width/2,obj1.top+obj1.height/2];
   Obj2Center=[obj2.left+obj2.width/2,obj2.top+obj2.height/2];

   var distance=Math.sqrt( Math.pow( Obj2Center[0]-Obj1Center[0], 2)  + Math.pow( Obj2Center[1]-Obj1Center[1], 2) )

    return distance;
}

function hasCollision(div1,div2){  
 var obj1 = div1.getBoundingClientRect();
 var obj2 = div2.getBoundingClientRect();
 return getDistance(obj1,obj2)<obj1.width/2+obj2.width/2;
}

最终代码-

let allDivs = document.querySelectorAll("#dd")
dd.addEventListener("click" , function(){
  red.addEventListener("mousemove" , e=>{
    red.style.left = e.clientX - 25 + "px"
    red.style.top = e.clientY - 25 + "px"
        var red1 =document.getElementById("red1");
    var isColliding = hasCollision(red, red1);
    if (isColliding) {
        red1.style.backgroundColor = "red";
    }
  })
  blue.addEventListener("mousemove", e=>{
    blue.style.left = e.clientX - 25 + "px"
    blue.style.top = e.clientY - 25 + "px"
    var blue1 =document.getElementById("blue1");
    var isColliding = hasCollision(blue, blue1);
    if (isColliding) {
        blue1.style.backgroundColor = "blue";
    }
  })
  green.addEventListener("mousemove", e=>{
    green.style.left = e.clientX - 25 + "px"
    green.style.top = e.clientY - 25 + "px"
    var green1 =document.getElementById("green1");
    var isColliding = hasCollision(green, green1);
    if (isColliding) {
        green1.style.backgroundColor = "green";
    }
  })
});

function getDistance(obj1,obj2){
    Obj1Center=[obj1.left+obj1.width/2,obj1.top+obj1.height/2];
    Obj2Center=[obj2.left+obj2.width/2,obj2.top+obj2.height/2];

    var distance=Math.sqrt( Math.pow( Obj2Center[0]-Obj1Center[0], 2)  + Math.pow( Obj2Center[1]-Obj1Center[1], 2) )

    return distance;
}

function hasCollision(div1,div2){  
    var obj1 = div1.getBoundingClientRect();
var obj2 = div2.getBoundingClientRect();
    return getDistance(obj1,obj2)<obj1.width/2+obj2.width/2;
}

#dd{
    width: 100%;
    height: 100%;
    display: inline-block;
    }
  #red{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: red;
    position: absolute;
  }
  #blue{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: blue;
    position: absolute;

  }
  #green{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: green;
    position: absolute;

  }
  #red1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid red;
    margin-left: 300px;
  }
  #blue1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid blue;
    margin-left: 300px;
  }
  #green1{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border:1px solid green;
    margin-left: 300px;
  }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="dd">
        <div id="red"></div>
        <div id="red1"></div>
        <div id="blue"></div>
        <div id="blue1"></div>
        <div id="green"></div>
        <div id="green1"></div>
      </div>
      </body>
</html>

【讨论】：