如何在每行和每列中生成随机数
how to generate random number in each rows and columns
本文关键字：随机数 更新时间：2023-09-26
我想在每一行和每一列中生成随机数。我在下面这样写。它只生成两行。我想创建4*4 suduku。所以我给了像这个
<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"> </td>
<td class="normal" ><input type="text" name=""></td>
<td class="normal" > </td>
<td class="red" id="cell4"> </td>
</tr>
<tr>
<td class="normal" id="cell1"> </td>
<td class="normal" id="cell2"> </td>
<td class="normal" id="cell3"> </td>
<td class="red" id="cell4"> </td>
</tr>
<tr>
<td class="normal" id="cell1"> </td>
<td class="normal" id="cell2"> </td>
<td class="normal" id="cell3"> </td>
<td class="red" id="cell4"> </td>
</tr>
<tr>
<td class="normal" id="cell1"> </td>
<td class="normal" id="cell2"> </td>
<td class="normal" id="cell3"> </td>
<td class="red" id="cell4"> </td>
</tr>
</table>
</span>
<input type="button" value="Re-generate Numbers" onclick="UpdateTable();" />
请帮助我在所有行和列中生成随机数。提前谢谢。
确保HTML中有唯一的Id。
还要避免使用内联事件。使用javascript绑定事件，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"> </td>
<td class="normal" id="cell01"> </td>
<td class="normal" id="cell02"> </td>
<td class="red" id="cell03"> </td>
</tr>
<tr>
<td class="normal" id="cell10"> </td>
<td class="normal" id="cell11"> </td>
<td class="normal" id="cell12"> </td>
<td class="red" id="cell13"> </td>
</tr>
<tr>
<td class="normal" id="cell20"> </td>
<td class="normal" id="cell21"> </td>
<td class="normal" id="cell22"> </td>
<td class="red" id="cell23"> </td>
</tr>
<tr>
<td class="normal" id="cell30"> </td>
<td class="normal" id="cell31"> </td>
<td class="normal" id="cell32"> </td>
<td class="red" id="cell33"> </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();
检查演示
很容易将单元格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"> </td>
<td class="normal" id="cell2"> </td>
<td class="normal" id="cell3"> </td>
<td class="red" id="cell4"> </td>
</tr>
<tr class="tr2">
<td class="normal" id="cell5"> </td>
<td class="normal" id="cell6"> </td>
<td class="normal" id="cell7"> </td>
<td class="red" id="cell8"> </td>
</tr>
<tr class="tr3">
<td class="normal" id="cell9"> </td>
<td class="normal" id="cell10"> </td>
<td class="normal" id="cell11"> </td>
<td class="red" id="cell12"> </td>
</tr>
<tr class="tr4">
<td class="normal" id="cell13"> </td>
<td class="normal" id="cell14"> </td>
<td class="normal" id="cell15"> </td>
<td class="red" id="cell16"> </td>
</tr>
</table>
</div>
</div>
<input type="button" value="Re-generate Numbers" onclick="UpdateTable();" />
</center>
</body>
我有一个库，它可能会让这件事变得更容易。
它被称为html5csv.js
这是您的4x4随机化表问题的JSFIDDLE。
html
<div id='content'></div>
<div id='control'>
<button id='start'>click to randomize</button>
</div>
javascript/jQuery/与加载了html5csv.js的
$(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();
});
类已经设置好了，我在Fiddle中为.red设置了一个CSS粉色背景，它看起来像Sushanth的表，但动态生成的源不会在Fiddl中显示为"视图框架源"。
为了进一步扩展这个例子，可以将随机表保存在sessionStorage中，然后使用各种按钮执行操作（重新随机化、提交谜题的解决方案等），方法是用CSV.begin从sessionStorage中获取数据，然后在.call中对其进行处理，然后再次保存并显示。
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;
}
}
相关文章：
- 如何在javascript中获得与特定数字相等的随机数
- Javascript动态变量(添加了随机数）
- 在javascript中添加和显示对象的随机数组中的视频
- 设置随机数，然后每5秒随机减少一次，直到达到0(javascript）
- 生成随机数10次
- 选择随机数组元素并放置到另一个数组中
- 正确使用AES-CTR模式的随机数和计数器
- java中具有长种子值的随机数生成器
- 什么'这个随机数猜谜游戏错了
- 3种对象，随机数组javascript
- 带有 JavaScript 随机数函数的未知问题
- 在JavaScript中生成和检查随机数
- Javascript 随机数组
- 一种从随机数的序列中查找值的简单算法
- 用不重复的随机数填充数组
- 在HTML中创建随机数生成器
- 在 JavaScript 中获取范围的随机数的最佳方法
- 在数组中生成随机数，没有任何重复的数字
- JavaScript 使用随机数组
- 避免在 javascript 中的字符串中随机数组中重复元素
