Question

我想在div＃leftside里面的5个不同的地方创建5张图片。我确实创建了5个图像，但是它们处于相同的位置并且不会随机传播到我的div中。这是一个代码......有人可以帮忙吗？

<!DOCTYPE html>
<html lang="en">
<head http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Matching game</title>
    <style type="text/css">
        img {position: absolute;}
        div {position: absolute;width: 500px;height: 500px;}
        #rightSide { left: 500px;
            border-left: 1px solid black }
    </style>
    <script type="text/javascript">
    function generateFaces() {
        var numberOfFaces = 5;
        var theLeftSide = document.getElementById("leftSide");
        var i = 0;
        var topvar = (Math.floor(Math.random()*400));
        var leftvar = (Math.floor(Math.random()*400));
        if (i < 5){ 
            numberOfFaces = document.createElement("img");
            i++;
            numberOfFaces.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
            numberOfFaces.style.top = topvar + 'px';
            numberOfFaces.style.left = leftvar + 'px';
            theLeftSide.appendChild(numberOfFaces);
        }


    }
    </script>
</head>
<body onload="generateFaces()">
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide"></div>
<div id="rightSide"></div>

</body>
</html>

Answer 1

当您打算使用while循环时，您正在使用if语句。此外，您需要将定位逻辑移动到循环中。

https://jsfiddle.net/knwL2bn4/

重构：

    <!DOCTYPE html>
<html lang="en">
<head http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Matching game</title>
    <style type="text/css">
        img {position: absolute;}
        div {position: absolute;width: 500px;height: 500px;}
        #rightSide { left: 500px;
            border-left: 1px solid black }
    </style>
    <script type="text/javascript">
        function generateFaces() {
            var numberOfFaces = 5;
            var theLeftSide = document.getElementById("leftSide");
            var i = 0;

            while (i < 5){ 
                var topvar = (Math.floor(Math.random()*400));
                var leftvar = (Math.floor(Math.random()*400));
                numberOfFaces = document.createElement("img");
                i++;
                numberOfFaces.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
                numberOfFaces.style.top = topvar + 'px';
                numberOfFaces.style.left = leftvar + 'px';
                theLeftSide.appendChild(numberOfFaces);
            }


        }
    </script>
</head>
<body onload="generateFaces()">
<p>Click on the extra smiling face on the left.</p>
<div id="leftSide"></div>
<div id="rightSide"></div>

</body>
</html>

Answer 2

您应该使用function generateFaces() { var numberOfFaces = 5; var theLeftSide = document.getElementById("leftSide"); var i; for (i = 0; i < 5; i += 1) { var topvar = (Math.floor(Math.random()*400)); var leftvar = (Math.floor(Math.random()*400)); numberOfFaces = document.createElement("img"); numberOfFaces.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png"; numberOfFaces.style.top = topvar + 'px'; numberOfFaces.style.left = leftvar + 'px'; theLeftSide.appendChild(numberOfFaces); } }循环

Gender.where(gender: 'Masc').categories.where(name: 'clothes').subcategories.create([{ name: 't-shirt' }])

Answer 3

不太确定你在那里尝试做什么，但我在小提琴中重写了它。你可能需要调整它才能让它做你想做的事情：

Fiddle

HTML

<body>
  <p>Click on the extra smiling face on the left.</p>
  <div id="leftSide"></div>
  <div id="rightSide"></div>
</body>

的Javascript

function generateFaces() {
  var face;
  var theLeftSide = document.getElementById("leftSide");
  for (i = 0; i < 5; i++) {
    var topvar = (Math.floor(Math.random() * 400));
    var leftvar = (Math.floor(Math.random() * 400));
    face = document.createElement("img");
    face.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
    face.style.top = topvar + 'px';
    face.style.left = leftvar + 'px';
    theLeftSide.appendChild(face);
  }
}
generateFaces();

CSS

img {
  position: absolute;
}

div {
  position: absolute;
  width: 500px;
  height: 500px;
}

Javascript在div createElement中创建5 img

3 个答案: