如何计算网格中随机数的平均值？

问题描述 投票：1回答：4

我有一个随机的网格生成器，询问你想要多大的网格。如果输入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>

这是我的代码，我似乎无法弄清楚如何去做。

javascript
4个回答
2
投票

这是一种简单的方法，只需累积您计算的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>
1
投票

你给我们开始的几个补充。

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>

也是一个小提琴：https://jsfiddle.net/xpvt214o/775850/

1
投票

好吧，创建一个变量，你可以对所有生成的随机数求和。

最后，获取该数字并除以网格区域（用户输入的数字*用户输入的数字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>
0
投票

已经有一些很好的答案。这是一种不同的方法。我还“清理”了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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.