Javascript创建5格在div createElement

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

<!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>

来源

2016-03-04 Lazar Nikolic

当您打算使用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>

来源

2016-03-04 22:47:00

您应该使用for循环

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); 
     } 
    }

来源

2016-03-04 22:47:40

不太清楚你正在尝试做的，但我重写了它的小提琴。您可能需要调整它来得到它做你想要什么：

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; 
}

来源

2016-03-04 23:01:03 sscotti

真不明白哪个脸是t他“多余的脸”？ – sscotti

Javascript创建5格在div createElement

回答

相关问题