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在网格中放置随机对象/图像

回答

相关问题