如何给每个单元格随机数字答案

【问题标题】：How to give each cell random digit number如何给每个单元格随机数字
【发布时间】：2020-05-31 02:14:34
【问题描述】：

我想给每个单元格一个 50-500 之间的随机两位数我正在尝试使用 math.floor(math.random() 作为函数，但到目前为止没有成功

还有我如何只定位一个单元格，例如我有 5x5 个插槽 5 行 5 列，我想单独定位角落的左上角单元格，而不是像其余单元格那样随机生成的数字，我想要给它一个我可以控制它的符号，所以如果符号在左上角，我点击中间，例如它移动到那里，替换生成的数字，它在中间并保持左上角为空

很抱歉，任何帮助都非常感谢

<html>
<head>
<style>
td{
border:2px solid black;
width:10px;
height:10px;
}
td:hover{background-color:lightgreen;}
.grn{
background-color:green;
color:white;
}
</style>

<body>
<div id='ff'></div>

<script>
var isCol=0;
var board=[];
for(r=0;r<7;r++){
    var line=[];
    for(c=0;c<7;c++){
        line.push(r);
    }
    board.push(line);
}


function prs(c,r){
    showTable(c,r);
    isCol=(isCol+1)%2;
}

function toColor(col,row,chosen_col,chosen_row){
var ret=false;
switch(isCol){
    case 0:
        if(row==chosen_row){
            ret=true;
        }
        break;
    case 1:
        if(col==chosen_col){
            ret=true;
        }
        break;
}

return ret;
}

function showTable(chosen_col,chosen_row){
var str="";
str+="<table border=1>";
for(row=0;row<7;row++){
    str+="<tr>";
    for(col=0;col<7;col++){ 
        str+="<td onclick='prs("+col+","+row+")'";
        if(toColor(col,row,chosen_col,chosen_row)){
            str+=" class='grn' ";
        }
        str+=">";
str+=board[row][col];
        str+="</td>";
    }
    str+="</tr>";
}
str+="</table>";

 document.getElementById("ff").innerHTML=str;
}


showTable(-1);
</script>
</body>
</html>

【问题讨论】：

让我们一起数一数插槽。 7x7。现在，为什么每一行都显示行索引号而不是随机的 50-500 个？
只是出于好奇，您正在构建什么？单元格中有随机（可能是重复的）数字是什么意思？

标签： javascript html css

【解决方案1】：

希望我理解正确。

关注Math.floor(Math.random() * (MAX - MIN + 1)) + MIN，别忘了“+1”。没有这个，你永远不会得到 500（499 是最大值，我尝试在 cmets 中证明它）。

此外，您不必为每个单元格创建单个回调。最好为表上的事件“单击”创建一个回调。然后检查这个事件出现的元素。我建议您阅读有关 JavaScript 中的事件冒泡和传播 的内容。这完全是关于你的任务。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Table</title>
    <style>
        td{
            border:2px solid black;
            width:10px;
            height:10px;
        }

        td:hover{
            background-color:lightgreen;
        }

        .grn {
            background-color:green;
            color:white;
        }
    </style>
</head>
<body>
    <div id="ff"></div>
    <script>
        'use strict';

        const SIZE = 10;        // Size of the table (SIZE x SIZE)
        const MIN = 50;         // Minimal number in cell
        const MAX = 500;        // Maximum number in cell
        const CHOSEN_COL = 0;   // Column where chosen cell is
        const CHOSEN_ROW = 0;   // Row where chosen cell is
        const SYMBOL = 'S';     // Yours 'symbol'

        function showTable() {
            let table = document.createElement('table');
            let chosenTd;   // <td> element of chosen cell

            for (let i = 0; i < SIZE; i++) {
                let tr = document.createElement('tr');
                for (let j = 0; j < SIZE; j++) {
                    let td = document.createElement('td');

                    // 1) Math.random() returns values from 0 (inclusive) to 1 (exclusive)
                    // 2) Math.random() * (MAX - MIN) returns values from 0 (inclusive)
                    // to (MAX - MIN) (exclusive)
                    // 3) Math.random() * (MAX - MIN + 1) returns values from 0 (inclusive)
                    // to (MAX - MIN + 1) (exclusive)
                    // 4) Math.floor(Math.random() * (MAX - MIN + 1)) returns values from 0 (inclusive)
                    // to (MAX - MIN) (inclusive!!!)
                    // 5) Math.floor(Math.random() * (MAX - MIN + 1)) + MIN returns values from
                    // MIN (inclusive) to MAX (inclusive) - exectly what we need
                    //
                    // Pay attention to 'inclusive' and 'exclusive'
                    td.textContent = Math.floor(Math.random() * (MAX - MIN + 1)) + MIN;

                    // Obvious (I hope)
                    if (i == CHOSEN_ROW && j == CHOSEN_COL) {
                        chosenTd = td;
                        chosenTd.className = 'grn';
                        chosenTd.textContent = SYMBOL;
                    }

                    tr.append(td);
                }
                table.append(tr);
            }

            table.onclick = function(e) {
                // If we click not at chosen cell (you call it 'symbol')
                if (e.target != chosenTd) {
                    // Now just free cell where 'symbol' is
                    // And 'move' the 'symbol'

                    e.target.textContent = chosenTd.textContent;

                    chosenTd.className = '';
                    chosenTd.textContent = '';

                    chosenTd = e.target;
                    chosenTd.className = 'grn';
                }
            }

            document.querySelector('#ff').append(table);
        }
    </script>
</body>
</html>

当然，您还必须检查e.target 是一个单元格，而不是行或完整的表格。但我敢肯定，你可以自己做。

【讨论】：

@mikotodread 这是一个指向 HTML 元素的链接。我们需要这个来检查是否点击了这个元素（所以我们不需要做任何事情），或者另一个元素（在这种情况下我们“移动”这个元素）。事实上，我们可以在没有chosenTd 的情况下做到这一点，这对我来说更舒服。另外，我不确定是否正确理解了您的需求。
@mikotodread CHOSEN_COL 和 CHOSEN_ROW 是您的“符号”的坐标（我称之为“选择的单元格”）。 CHOSEN_COL 是该单元格在列中的编号，CHOSEN_ROW 在行中。我们使用i 和j 来生成表格。我们可以说i 和j 是表格中每个单元格的坐标。所以if (i == CHOSEN_ROW && j == CHOSEN_COL) 的意思是，比现在我们生成选择的单元格，我们附加到它特殊的类并赋予它特殊的值。我现在不知道如何用更简单的方式来表达。
是的，我知道这个事实，我明白这部分，红色的东西我不明白，休息我明白link查看屏幕截图
@mikotodread 好的，我明白你的意思。变量td 是<td> HTML 元素的对象。我们将每个元素附加到tr，并将每个tr 附加到table。希望，很清楚。 chosenTd 只是对 <td> 元素之一的另一个引用（这是符号）。我们必须保存它，因为我们在table.onclick中使用它。
哦，现在我明白了，所以选择的 td，我们必须创建它，以便我们可以给它类和变量，例如 grn 和 symbol 并在其他地方使用它，我现在明白它的用途了以及为什么创建它导致我遇到其他问题，这里是link

【解决方案2】：

除了Stack Overflow - how to generate a random number in range...
我认为您使代码过于复杂。这是一个建议：

const size = 5;
const rand = (min, max) => ~~(Math.random() * (max - min) + min);
let tdEmpty = null;            // A place to store the currently empty cell 

const moveValue = evt => {
  const text = evt.target.textContent; // Get cell text
  if (!text) return;           // Clicked empty one, stop function.
  tdEmpty.textContent = text;  // Move text to the currently empty
  evt.target.textContent = ''; // Clear text from the clicked one
  tdEmpty = evt.target;        // Store the new empty TD cell.
};

const newTD = TR => {
  const td = TR.insertCell();
  const text = tdEmpty ? rand(50, 501) : ""; // Create "num" or "" 
  td.appendChild(document.createTextNode(text));
  td.addEventListener('click', moveValue); // Assign a click callback
  if (!tdEmpty) tdEmpty = td;              // Store the first empty cell
};

const newTR = TABLE => {
  const tr = TABLE.insertRow();
  for (let i=0; i<size; i++) newTD(tr);
};

const table = document.createElement('table');
for (let i=0; i<size; i++) newTR(table);

document.querySelector('#ff').appendChild(table);

td { border: 2px solid black; }
td:hover { background-color: lightgreen; }

&lt;div id='ff'&gt;&lt;/div&gt;

有用的链接：

https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertRow
https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement/insertCell
https://developer.mozilla.org/en-US/docs/Web/API/Document/createTextNode
Generating random whole numbers in JavaScript in a specific range?

【讨论】：

随机函数中的~~是什么？
@jsejcksn 懒惰的做法Math.floor()
是的，我看到了那个帖子，但不太明白，我看了 10 多次，还有你写的新代码，我不明白一半，对不起，我纯粹依靠关于javascript，我一个月前才开始学习，我知道有很多方法可以做一件事，有些代码可以提供更好的性能，但我的目标是简单、简单、初学者可以理解
@mikotodread 好吧，快乐的 JS 学习。如果您有任何问题 - 提问。