Question

代码应该逐个生成5个元素，这样当下载页面时，我们将在随机位置看到5个元素（newFace）。

此代码生成所有5个元素，但它们一个接一个地保持对齐，而不是像希望一样出现在随机位置

function generate_faces() {
    var theLeftSide = document.getElementById("leftSide");
    var number_of_faces = 0;
    while (number_of_faces < 5){
        var top_position = Math.floor(Math.random()*300);
        var left_position = Math.floor(Math.random()*300);
        newFace = document.createElement("img");
        newFace.setAttribute(
          "src",
          "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"
        );
        newFace.style.top = top_position+"px";
        newFace.style.left = left_position+"px";
        theLeftSide.appendChild(newFace);
        number_of_faces = number_of_faces + 1;
    }
}

Answer 1

试试这个。

<!DOCTYPE html>
<html>
<head></head>
<style>
html, body, leftSide {
    width: 100%;
    height: 100%;
    position: relative;
}
#leftSide {
    position: relative;
}

#leftSide img {
    position: absolute;
}
</style>
<body onclick="generate_faces()">
<div id="leftSide">

</div>
</body>
</html>
<script>
function generate_faces() {

var theLeftSide = document.getElementById("leftSide");
var number_of_faces = 0;
while (number_of_faces < 5){
    var top_position = Math.floor(Math.random()*300);
    var left_position = Math.floor(Math.random()*300);
    newFace = document.createElement("img");
    newFace.setAttribute(
      "src",
      "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"
    );
    newFace.style.top = top_position+"px";
    newFace.style.left = left_position+"px";
    theLeftSide.appendChild(newFace);
    number_of_faces = number_of_faces + 1;
  }
}
</script>

为什么这些元素不会出现在随机位置，但它们在div之上保持对齐？

1 个答案: