Question

我试图仅使用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>

Answer 1

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

Answer 2

也许这个例子会对你有所帮助：

我添加了一个函数'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>

Answer 3

这是一个工作版本：

<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更容易。我用过香草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; }

Javascript将随机对象/图像放在网格中

3 个答案: