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

回答

相關問題