Javascript在網格中放置隨機對象/圖像

我試圖在只使用javascript的動態網格中放置隨機對象。我被困在如何在網格中放置隨機對象/圖像。像掃雷，但尋找一個簡單的例子開始。Javascript在網格中放置隨機對象/圖像

這是我在下面Creating a dynamic grid of divs with Javascript

代碼下面的帖子的鏈接：

<html><head> 
<script language="javascript"> 
function genDivs(v){ 
    var e = document.body; // whatever you want to append the rows to: 
    for(var i = 0; i < v; i++){ 
    var row = document.createElement("div"); 
    row.className = "row"; 
    for(var x = 1; x <= v; x++){ 
     var cell = document.createElement("div"); 
     cell.className = "gridsquare"; 
     cell.innerText = (i * v) + x; 
     row.appendChild(cell); 
    } 
    e.appendChild(row); 
    } 
    document.getElementById("code").innerText = e.innerHTML; 

} 
</script> 
</head> 
<body> 
    <input type="button" onclick="genDivs(6)" value="click me"> 
    <code id="code"></code> 
</body> 
</html>

來源

2015-11-07 icode

我可以reccomend你對象的數組可以鏈接到你的圖片和玩數學蘭特獲取隨機圖片，並顯示您的身體標記中的每個細胞。 –

我實際上找出了一條出路，但我很高興看到更好的歸檔方式，這對學習很有幫助。 – icode

這裏是一個工作版本：

<style> 
    .row { width: 100%; clear: both; text-align: center; } 
    .col { display: inline-block; min-height: 20px; min-width: 20px; padding: 8px 10px; background-color: #ededed; margin: 1px; } 
    .col:hover { background-color: #333333; color: #ffffff; } 
</style> 

<input type="button" onClick="genDivs(6);" value="click me" /> 
<div id="target"></div> 

<script language="javascript"> 
function genDivs(rows,cols){ 
    var e = document.getElementById("target"); 
    cols = cols || rows; 
    for(var r = 0; r < rows; r++) { 
    var row = document.createElement("div"); 
    row.className = "row"; 
    for(var c = 0; c < cols; c++) { 
     var col = document.createElement("div"); 
     col.className = "col"; 
     col.innerHTML = (r * rows) + c; 
     col.innerHTML = getElement(); 
     row.appendChild(col); 
    } 
    e.appendChild(row); 
    } 
} 
function getElement(){ 
    var elements = [ 
     "A", 
     "B", 
     "C" 
    ] 
    return elements[Math.floor(Math.random() * (elements.length))]; 
} 
</script>

這是與jQuery容易。我使用了vanilla Javacript。我通常會將onclick放在javascript中，但我仍然保留原樣。

這裏有一個的jsfiddle： https://jsfiddle.net/mckinleymedia/chLLg4rr/

希望這有助於。

根據要求，我做了一個jQuery版本。我也使用lodash來提高效率（lodash非常方便）。而且我更正確地分離了腳本，html和樣式 - 這些應該分別放在不同的文件中。這裏有一個的jsfiddle： https://jsfiddle.net/mckinleymedia/btb9vp26/

腳本：

function grid(rows,cols,target){ 
    cols = cols || rows; 
    target = target || "grid"; 
    var gridDiv = $("." + target); 
    gridDiv.html(''); // clear grid to reload 
    _.times(rows, function() { 
    gridDiv 
     .each(function(){ // allows multiple grids 
      $(this).append(addRows(rows,cols)); 
     }); 
}); 
}; 
function addRows(rows,cols){ 
    return $("<div />") 
       .addClass("row") 
       .html(
        addCols(cols) 
       ); 
}; 
function addCols(cols){ 
    return _.times(cols, function() { 
     return $("<div />") 
      .addClass("col") 
      .html(getElement()); 
    }); 
}; 
function getElement(){ 
    var elements = [ 
     "A", 
     "B", 
     "C" 
    ]; 
    return _.sample(elements); 
}; 
$(".js-grid").click(function(){ grid(6,10) }); 
$(".js-grid2").click(function(){ grid(3,5,'grid2') });

HTML：

<button type="btn btn-info" class="js-grid">Click me</button> 
<button type="btn btn-info" class="js-grid">Or me</button> 
<button type="btn btn-info" class="js-grid2">Grid 2</button> 
<div class="grid"></div><div class="grid2"></div> 
<div class="grid"></div>

風格：

.row { width: 100%; clear: both; text-align: center; } 
.col { display: inline-block; min-height: 20px; min-width: 20px; padding: 8px 10px; background-color: #ededed; margin: 1px; } 
.col:hover { background-color: #333333; color: #ffffff; } 
.grid, .grid2 { margin-bottom: 10px; }

來源

2015-11-07 18:04:48

我喜歡你的代碼是如何工作的，但對你爲什麼使用cols = cols ||有疑問。行; – icode

我補充說，要啓用非矩形的矩形傳遞。如果你只是使用這個：genDivs（6），它會做出6x6的方形。如果你這樣做：genDivs（6,8），它會創建一個6x8的矩形。 cols = cols ||行;如果它已經被傳入，將會離開cols，但如果沒有，則會將其設置爲與行相同。通過將onclick更改爲genDivs（6,8）來測試它; –

好的，我明白你的意思了。好，我學到了新東西。如果你有時間可以展示如何在jQuery中做到這一點。謝謝 – icode

.innerText是非標準;改爲使用.textContent（有關差異，請參閱https://stackoverflow.com/a/19032002和https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent）。

考慮將行和單元格放在div容器內，以避免污染其餘的HTML。事情是這樣的：

<html> 
<head> 
<!--`language` attribute is deprecated--> 
<script type="text/javascript"> 
function genDivs(v) { 
    var e = document.querySelector("#container"); // container div 
    for(var i = 0; i < v; i++) { 
    var row = document.createElement("div"); 
    row.className = "row"; 
    for(var x = 1; x <= v; x++) { 
     var cell = document.createElement("div"); 
     cell.className = "gridsquare"; 
     cell.textContent = (i * v) + x; // Use .textContent instead of .innerText 
     row.appendChild(cell); 
    } 
    e.appendChild(row); 
    } 
    document.getElementById("code").textContent = e.innerHTML; // Same thing here 

} 
</script> 
</head> 
<body> 
    <input type="button" onclick="genDivs(6)" value="Generate some results!"> 
    <div id="container"></div> 
    <code id="code"></code> 
</body> 
</html>

來源

2015-11-07 17:19:00

也許這個例子可以幫助你進一步：

我添加了一個功能「generateRandomNumbers」將返回隨機數的數組。所以generateRandomNumbers（6）會以隨機順序給你一個數字爲1-36的數組。

然後，當創建一個單元格時，我從該數組中取出一個隨機數的元素，並將其添加到單元格的「innerHTML」中。

function genDivs(v) { 
 
     document.getElementById("code").innerHTML = ""; 
 
     var randomNumbers = generateRandomNumbers(v); 
 

 
     for (var i = 0; i < v; i++) { 
 
      var row = document.createElement("div"); 
 
      row.className = "row"; 
 
      for (var x = 1; x <= v; x++) { 
 
       var cell = document.createElement("div"); 
 
       cell.className = "gridsquare"; 
 
       cell.innerHTML = randomNumbers.pop(); 
 
       row.appendChild(cell); 
 
      } 
 
      document.getElementById("code").appendChild(row); 
 
     } 
 
    } 
 
    // Code for this random function found on: http://stackoverflow.com/questions/2380019/generate-unique-random-numbers-between-1-and-100 
 
    function generateRandomNumbers(number) { 
 
     var randomNumbers = number * number; 
 
     var arr = []; 
 
     while(arr.length < randomNumbers){ 
 
      var randomnumber=Math.ceil(Math.random()*randomNumbers); 
 
      var found=false; 
 
      for(var i=0;i<arr.length;i++){ 
 
       if(arr[i]==randomnumber){found=true;break} 
 
      } 
 
      if(!found)arr[arr.length]=randomnumber; 
 
     } 
 
     return arr; 
 
    }

.gridsquare { 
 
    display: inline-block; 
 
    border: 1px solid #000; 
 
    width: 20px; 
 
    height: 20px; 
 
    padding: 3px; 
 
    margin: 2px; 
 
}

<input type="button" onclick="genDivs(6)" value="click me"> 
 
<code id="code"></code>

來源

2015-11-07 17:53:39

我喜歡這樣的結構，比威廉的例子更多的代碼結構，但是我知道發生了什麼。這與我剛剛發現的相似，但我只返回1或0。如果1附加框，如果0附加空白框div。 – icode

Javascript在網格中放置隨機對象/圖像

回答

相關問題