Javascript在网格中放置随机对象/图像
Javascript place random object/images in a grid
我正试图仅使用javascript将随机对象放置在动态网格中。我一直纠结于如何在网格中放置随机对象/图像。有点像扫雷舰，但正在寻找一个简单的例子开始。
这是我关注的帖子的链接，用Javascript 创建一个动态的div网格
以下代码：
<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>
这里有一个工作版本：
<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更容易做到这一点。我使用了香草Javascript。我通常会把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; }
.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>
也许这个例子会进一步帮助您：
我添加了一个函数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>相关文章：
- JavaScript-从对象数组中输出随机OBJECT
- 通过组合变量在解析JSON时访问随机对象
- 画布中的随机对象
- 获取随机jQuery对象的属性
- Javascript从数组中选择一个随机对象集
- Javascript:创建一个随机数学方程数组作为对象，20次
- 为对象元素分配随机值
- 如何随机排列数组中的对象
- 以随机顺序定位和循环对象
- 在 JavaScript 中随机化(洗牌）带有对象的数组
- Javascript:随机“对象没有方法”错误，即使使用 jquery.getScript(）
- 从单独的文件中获取随机对象
- 从数组中获取单个随机对象
- 如何生成一个随机数来从数组中获取随机对象
- Javascript在网格中放置随机对象/图像
- 随机化数组，选择2个随机对象，并填充一个新数组
- 将HTML元素设置为随机对象键值对
- 用随机对象填充对象，并在javascript中设置特定属性
- 显示选定内容中特定数量的随机对象，并使用 js/jQuery 隐藏所有其他对象
- 如何在React中从数组中渲染随机对象
