javascript - 为什么我的 div 在移动时不留在我的另一个 div 上？

Question

我试图在点击 3 次后让蓝色的“盾牌”div 覆盖红色的“按钮”div，但它没有正确覆盖它......它要么太左要么太远等。我没有知道如何修复它。我试过调整 randomplace 变量，但这似乎不起作用。谁能帮忙？

<div id="shield"></div>
<div id="button" onclick="buttonmes()">
   <div id="message"></div>
</div>
<style>
    #button {height:200px; width:200px; background-color:red;position:absolute;top:50%;left:50%;border-radius:50%;}
    #button:active{transform:scale(0.9,0.9);}
    #message{position:relative;top:50%;left:35%;}
    #shield{height:200px;width:200px;background-color:blue;visibility:hidden;position:absolute;top:50%;left:50%;}
</style>
<script>
    var clicknum = 0;
    var showme = document.getElementById("shield");
    function randomloc() {
        var randomlyPlace = function(el){
            el.style.position = "absolute";
            el.style.top = Math.floor(Math.random()*document.body.clientHeight);
            el.style.left = Math.floor(Math.random()*document.body.clientWidth);
        };

        randomlyPlace(document.getElementById('shield'));
        randomlyPlace(document.getElementById('button'));

    }
    function buttonmes() { 
        if (clicknum === 0) {
            document.getElementById("message").innerHTML = "Hey stop it!";
            clicknum++;
            randomloc();
        }
        else if (clicknum === 1) {
            document.getElementById("message").innerHTML = "I said stop!";
            clicknum++;
            randomloc();

        }
        else if (clicknum === 2){

            document.getElementById("message").innerHTML = "Ha! Now you can't get me!";
            showme.style.visibility = "visible";
            clicknum++
        }
        else if (clicknum === 3) {
            showme.style.visibility = "hidden";
            document.getElementById("message").innerHTML = "How did you get me!?!";
            clicknum++;
        }
    }
</script>

Answer 1

建议:

• 在样式选择器 #shield 上添加 z-index 属性以置于最前面盾元素
  • 这是阻止红色按钮元素的技巧

观察:

• 我添加了透明度，你可以看到背景上的红色按钮
  • 但您可以删除属性 opacity: 0.26; 以满足您的需要
• 我简化了一些代码，主要是randomLocation()函数
  • 因为有太多不必要的代码无法做到这一点
• 添加了重置按钮以进行简单的重复测试

---

看这个基于您的代码的实例:

var clicknum = 0;
var btn = document.getElementById('button');
var msg = document.getElementById("message");
var shield = document.getElementById("shield");

function randomLocation() {
    var randomTop = Math.floor(Math.random() * document.body.clientHeight) + 'px';
    var randomLeft = Math.floor(Math.random() * document.body.clientWidth) + 'px';
    btn.style.top = shield.style.top = randomTop;
    btn.style.left = shield.style.left = randomLeft;
}

function buttonMsg() {
  if (clicknum === 0) {
    msg.innerHTML = "Hey stop it!";
    clicknum++;
    randomLocation();
  } else if (clicknum === 1) {
    msg.innerHTML = "I said stop!";
    clicknum++;
    randomLocation();
  } else if (clicknum === 2) {
    msg.innerHTML = "Ha! Now you can't get me!";
    msg.style.left = "10%";
    shield.style.visibility = "visible";
    clicknum++
  } else if (clicknum === 3) {
    shield.style.visibility = "hidden";
    msg.innerHTML = "How did you get me!?!";
    clicknum++;
  }
}

function reset() {
  clicknum = 0;
  msg.innerHTML = "";
  shield.style.visibility = "hidden";
  btn.style.top = "50%";
  btn.style.left = "50%";
  msg.style.left = "26%";
}

#button {
  height: 200px;
  width: 200px;
  background-color: red;
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
}

#button:active {
  transform: scale(0.9, 0.9);
}

#message {
  position: relative;
  top: 50%;
  left: 30%;
}

#shield {
  height: 200px;
  width: 200px;
  background-color: blue;
  visibility: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  /*add z-index to bring to front the element*/
  z-index: 9999;
  /*opacity layer to see the red button*/
  opacity: 0.26;
}

<div id="shield"></div>
<div id="button" onclick="buttonMsg();">
  <div id="message"></div>
</div>

<button type="button" onclick="reset();">Reset</button>