我有一个随机的网格生成器,询问你想要多大的网格。如果输入5
,它将生成一个带有随机数的5x5
网格,或带有随机数的10x10
网格等。
我现在需要在生成网格后获取这些随机数,并显示随机数的平均值。我似乎无法使这部分工作,因为每次生成新网格时都会有不同的数字。
var button = document.getElementById('gridSize');
button.onclick = function(e) {
result = document.getElementById('wrapper');
num = parseInt(document.getElementById('grid').value);
var str = "<table border='2'>";
for (row = 0; row < num; row++) {
str += "<tr>";
for (col = 0; col < num; col++) {
var randNumber = Math.floor(Math.random() * 100) + 1;
if (randNumber % 3 === 0) {
str += '<td style="background: red;">';
}
else if (randNumber % 2 === 0 && !randNumber % 3 === 0) {
str += '<td style="background: blue;">';
}
else {
str += "<td>";
}
str += randNumber + "</td>";
}
str += "</tr>";
}
str = str + "</table>";
result.innerHTML = str;
}
<form name="tablegen">
<input type="text" name="grid" id="grid"/>
<input name="generate" id="gridSize" type="button" value="Generate Grid!" onclick='createTable();'/>
</form>
<div id="wrapper"></div>
这是我的代码,我似乎无法弄清楚如何去做。
这是一种简单的方法,只需累积您计算的randNumber,然后除以单元格的总数。
var button = document.getElementById('gridSize');
button.onclick = function(e) {
result = document.getElementById('wrapper');
num = parseInt(document.getElementById('grid').value);
var avg = 0;
var str = "<table border='2'>";
for (row = 0; row < num; row++) {
str += "<tr>";
for (col = 0; col < num; col++) {
var randNumber = Math.floor(Math.random() * 100) + 1;
avg += randNumber;
if (randNumber % 3 === 0) {
str += '<td style="background: red;">';
}
else if (randNumber % 2 === 0 && !randNumber % 3 === 0) {
str += '<td style="background: blue;">';
}
else {
str += "<td>";
}
str += randNumber + "</td>";
}
str += "</tr>";
}
avg /= num*num;
str = str + "</table>" + "<span>Average is " + avg + "</span>";
result.innerHTML = str;
}
<form name="tablegen">
<input type="text" name="grid" id="grid"/>
<input name="generate" id="gridSize" type="button" value="Generate Grid!" onclick='createTable();'/>
</form>
<div id="wrapper"></div>
你给我们开始的几个补充。
var button = document.getElementById('gridSize');
var total = 0;
var divisor = 0;
button.onclick = function(e) {
result = document.getElementById('wrapper');
num = parseInt(document.getElementById('grid').value);
var str = "<table border='2'>";
for (row = 0; row < num; row++) {
str += "<tr>";
for (col = 0; col < num; col++) {
var randNumber = Math.floor(Math.random() * 100) + 1;
total = total+randNumber;
++divisor;
if (randNumber % 3 === 0) {
str += '<td style="background: red;">';
}
else if (randNumber % 2 === 0 && !randNumber % 3 === 0) {
str += '<td style="background: blue;">';
}
else {
str += "<td>";
}
str += randNumber + "</td>";
}
str += "</tr>";
}
str = str + "</table>";
result.innerHTML = str;
var average = total / divisor;
var averageSpan = document.getElementById('average');
averageSpan.innerText = average;
}
<form name="tablegen">
<input type="text" name="grid" id="grid"/>
<input name="generate" id="gridSize" type="button" value="Generate Grid!" onclick='createTable();'/>
</form>
Average: <span id="average"></span>
<div id="wrapper"></div>
好吧,创建一个变量,你可以对所有生成的随机数求和。
最后,获取该数字并除以网格区域(用户输入的数字*用户输入的数字num*num
)
如下所示:
var button = document.getElementById('gridSize');
button.onclick = function(e) {
var total = 0;
result = document.getElementById('wrapper');
num = parseInt(document.getElementById('grid').value);
var str = "<table border='2'>";
for (row = 0; row < num; row++) {
str += "<tr>";
for (col = 0; col < num; col++) {
var randNumber = Math.floor(Math.random() * 100) + 1;
if (randNumber % 3 === 0) {
str += '<td style="background: red;">';
}
else if (randNumber % 2 === 0 && !randNumber % 3 === 0) {
str += '<td style="background: blue;">';
}
else {
str += "<td>";
}
total += parseInt(randNumber);
str += randNumber + "</td>";
}
str += "</tr>";
}
str = str + "</table>";
result.innerHTML = str;
console.log("Avg.: ", total/(num*num) || 0)
}
<form name="tablegen">
<input type="text" name="grid" id="grid"/>
<input name="generate" id="gridSize" type="button" value="Generate Grid!" onclick='createTable();'/>
</form>
<div id="wrapper"></div>
已经有一些很好的答案。这是一种不同的方法。我还“清理”了HTML和代码:
let button = document.getElementById("generatorButton");
button.onclick = function(e) {
document.getElementById("grid").innerHTML = createGrid();
document.getElementById("full-average").innerText = getGridAverage();
document.getElementById("mod3-average").innerText = getGridAverage(".mod3");
document.getElementById("mod2-average").innerText = getGridAverage(".mod2");
}
function createGrid()
{
gridSize = parseInt(document.getElementById('gridSize').value);
let str = "<table border='2'>";
for (let row = 0; row < gridSize; row++) {
str += "<tr>";
for (let col = 0; col < gridSize; col++) {
var randNumber = Math.floor(Math.random() * 100) + 1;
if (randNumber % 3 === 0) {
str += '<td class="mod3">';
}
else if (randNumber % 2 === 0) {
str += '<td class="mod2">';
}
else {
str += "<td>";
}
str += randNumber + "</td>";
}
str += "</tr>";
}
str = str + "</table>";
return str;
}
function getGridAverage(cssClass)
{
if (cssClass == undefined) cssClass = "";
let cells = document.querySelectorAll("#grid td" + cssClass);
if (cells.length > 0)
{
let sum = 0;
for (const cell of cells)
{
sum += parseInt(cell.innerHTML);
}
return sum / cells.length;
}
else
return 0;
}
.mod3 {
background-color: red;
}
.mod2 {
background-color: blue;
}
<form name="tablegen">
<input type="text" id="gridSize" placeholder="Enter grid size (e.g.: 5)" />
<input type="button" id="generatorButton" value="Generate Grid!" />
</form>
<div id="grid"></div>
<div>Full Average:<span id="full-average">n/a</span></div>
<div>Mod3 (red) Average:<span id="mod3-average">n/a</span></div>
<div>Mod2 (blue) Average:<span id="mod2-average">n/a</span></div>