3

我想在每一行和每一列中生成随机数。我在下面这样写。它只生成两行。我想创建 4*4 数独。所以我给了这样的

    <script type="text/javascript">
  var random1, random2, random3, random4;
var randomArray = [0,0,0,0];


//sets array variables to random numbers
function CreateLottoValues() {
for (var i=0; i<randomArray.length; i++) {

randomArray[i] = Math.floor(Math.random()*4 + 1);


}
}
}

//create table
function UpdateTable() {
CreateLottoValues();
for (var i=0; i<randomArray.length; i++) {
tmp = 'cell'+(i+1);
document.getElementById(tmp).innerHTML = randomArray[i];     
}

}
</script>
</head>
<body onload="UpdateTable();">
<center>
<div id="container">

<div id="header"> <h1>Welcome</h1> </div>

<div id="content">
<span id="tableSpan">
<table border="1" id="lotto">
<tr>
<td class="normal" id="cell1">&nbsp;</td>
<td class="normal" ><input type="text" name=""></td>
<td class="normal" >&nbsp;</td>
<td class="red" id="cell4">&nbsp;</td>
</tr>
<tr>
<td class="normal" id="cell1">&nbsp;</td>
<td class="normal" id="cell2">&nbsp;</td>
<td class="normal" id="cell3">&nbsp;</td>
<td class="red" id="cell4">&nbsp;</td>
</tr>
<tr>
<td class="normal" id="cell1">&nbsp;</td>
<td class="normal" id="cell2">&nbsp;</td>
<td class="normal" id="cell3">&nbsp;</td>
<td class="red" id="cell4">&nbsp;</td>
</tr>
<tr>
<td class="normal" id="cell1">&nbsp;</td>
<td class="normal" id="cell2">&nbsp;</td>
<td class="normal" id="cell3">&nbsp;</td>
<td class="red" id="cell4">&nbsp;</td>
</tr>
</table>
</span>
<input type="button" value="Re-generate Numbers" onclick="UpdateTable();" />

请帮助我在所有行和列中生成随机数。提前致谢。

4

4 回答 4

1

确保您的 HTML 具有唯一Id性。

还要避免使用内联事件。使用更简洁的 javascript 绑定事件并分离您的关注点。

HTML

<center>
    <div id="container">
        <div id="header">
             <h1>Welcome</h1> 
        </div>
        <div id="content">
            <table border="1" id="lotto">
                <tbody>
                    <tr>
                        <td class="normal" id="cell00">&nbsp;</td>
                        <td class="normal" id="cell01">&nbsp;</td>
                        <td class="normal" id="cell02">&nbsp;</td>
                        <td class="red" id="cell03">&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="normal" id="cell10">&nbsp;</td>
                        <td class="normal" id="cell11">&nbsp;</td>
                        <td class="normal" id="cell12">&nbsp;</td>
                        <td class="red" id="cell13">&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="normal" id="cell20">&nbsp;</td>
                        <td class="normal" id="cell21">&nbsp;</td>
                        <td class="normal" id="cell22">&nbsp;</td>
                        <td class="red" id="cell23">&nbsp;</td>
                    </tr>
                    <tr>
                        <td class="normal" id="cell30">&nbsp;</td>
                        <td class="normal" id="cell31">&nbsp;</td>
                        <td class="normal" id="cell32">&nbsp;</td>
                        <td class="red" id="cell33">&nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <input id="btn" type="button" value="Re-generate Numbers" />
</center>

JS

var btn = document.getElementById('btn');

btn.addEventListener('click', UpdateTable);


// Set the max length of random number 
// and the max length
var maxLength = 4;
// You don't require an empty array here
// to populate the list of random numbers.

// Returns a random number
function CreateLottoValues() {
    return Math.floor(Math.random() * 4 + 1);
}

//create table
function UpdateTable() {
    // Iterate over each cell and set a random number
    for (var i = 0; i < maxLength; i++) {
        for (var j = 0; j < maxLength; j++) {
            tmp = 'cell' + i + j;
            document.getElementById(tmp).innerHTML = CreateLottoValues();
        }
    }
}

UpdateTable();

检查演示

于 2013-08-10T07:03:58.367 回答
0

我有一个图书馆，这可能会使这更容易。

它被称为html5csv.js

这是您的 4x4 随机表问题的 JSFIDDLE。

html

<div id='content'></div>
<div id='control'>
    <button id='start'>click to randomize</button>
</div>

加载了 html5csv.js 的 javascript/jQuery/

$(function(){
    $('#start').on('click', 
        CSV.begin('%F', {
            header: ['a','b','c','d'],
            dim:[4,4], 
            func: function(r,c){ return Math.floor(1+4*Math.random())}
        }).
        table('content', {
            header:1,
            table: {border:1, id: "lotto"},
            td: function(i,j,v){ 
                if (j===3){
                    return {class: 'red',
                            id: 'cell'+i+j};
                } else {
                    return {class: 'normal',
                            id: 'cell'+i+j};
                }
            }
        }).finalize()
                  );
    $('#start').click();
});

设置了类，我在小提琴中为 .red 设置了 CSS 粉红色背景，它似乎像 Sushanth 的表格一样工作，但动态生成的源不会在小提琴中显示为“视图框架源”。

为了进一步扩展此示例，可以将随机表保存在 sessionStorage 中，然后通过使用 CSV.begin 从 sessionStorage 中获取数据，然后执行操作（重新随机化、提交谜题解决方案等）的各种按钮，然后执行某些操作在 .call 中使用它。然后再次保存并显示它。

于 2013-08-10T08:04:38.130 回答
0

很容易将单元格 id 重命名为 cell1,cell2,cell3,cell4,cell5 ...并且在每次迭代中您必须编辑 4 列而不是一个

脚本

<script>
    var random1, random2, random3, random4;
    var randomArray = [0, 0, 0, 0];

    //sets array variables to random numbers
    function CreateLottoValues() {
        for (var i = 0; i < randomArray.length; i++) {
            randomArray[i] = Math.floor(Math.random() * 4 + 1);
        }
    }

    //create table
    function UpdateTable() {
        CreateLottoValues();
        for (var i = 0; i < randomArray.length; i++) {
            tmp1 = 'cell' + (i * 4 + 1);
            tmp2 = 'cell' + (i * 4 + 2);
            tmp3 = 'cell' + (i * 4 + 3);
            tmp4 = 'cell' + (i * 4 + 4);
            document.getElementById(tmp1).innerHTML = Math.floor(Math.random() * 4 + 1);;
            document.getElementById(tmp2).innerHTML = Math.floor(Math.random() * 4 + 1);;
            document.getElementById(tmp3).innerHTML = Math.floor(Math.random() * 4 + 1);;
            document.getElementById(tmp4).innerHTML = Math.floor(Math.random() * 4 + 1);;
        }
    } 
</script>

HTML

<body onload="UpdateTable();">
    <center>
        <div id="container">
            <div id="header">
                 <h1>Welcome</h1> 
            </div>
            <div id="content">
                <table border="1" id="lotto">
                    <tr class="tr1">
                        <td class="normal" id="cell1">&nbsp;</td>
                        <td class="normal" id="cell2">&nbsp;</td>
                        <td class="normal" id="cell3">&nbsp;</td>
                        <td class="red" id="cell4">&nbsp;</td>
                    </tr>
                    <tr class="tr2">
                        <td class="normal" id="cell5">&nbsp;</td>
                        <td class="normal" id="cell6">&nbsp;</td>
                        <td class="normal" id="cell7">&nbsp;</td>
                        <td class="red" id="cell8">&nbsp;</td>
                    </tr>
                    <tr class="tr3">
                        <td class="normal" id="cell9">&nbsp;</td>
                        <td class="normal" id="cell10">&nbsp;</td>
                        <td class="normal" id="cell11">&nbsp;</td>
                        <td class="red" id="cell12">&nbsp;</td>
                    </tr>
                    <tr class="tr4">
                        <td class="normal" id="cell13">&nbsp;</td>
                        <td class="normal" id="cell14">&nbsp;</td>
                        <td class="normal" id="cell15">&nbsp;</td>
                        <td class="red" id="cell16">&nbsp;</td>
                    </tr>
                </table>
            </div>
        </div>
        <input type="button" value="Re-generate Numbers" onclick="UpdateTable();" />
    </center>
</body>
于 2013-08-10T07:01:55.950 回答
0 
function checkForDraw() {

                var count = 0; 

                for(var i = 1; i < 10; i++){
                    var currentCell = document.getElementById("cell" + [i]);
                    if (currentCell.innerHTML == "O" || currentCell.innerHTML == "X"){
                        count = count + 1;

                    }

                }

                if(count == 9){
                    return true;

                } else {
                    return false; 
                }

            }
于 2017-10-31T09:38:48.780 回答