Javascript随机生成
我试图让td和tr在刷新窗口时做随机数列和行。我不确定我在这里做什么错了。我之前没有使用过这个功能,所以我知道一些事情是不对的。Javascript随机生成
<!DOCTYPE html>
<html onmousedown='event.preventDefault();'>
<head>
<title> Boxes </title>
<meta charset='utf-8'>
<style>
table {
border-spacing: 6px;
border: 1px rgb(#CCC);
margin-top: .5in;
margin-left: 1in;
}
td {
width: 40px; height: 40px;
border: 1px solid black;
cursor: pointer;
}
</style>
<script>
该函数返回包含min和max的随机值。
function R(min, max) {
var range = Math.abs(max-min)+1;
return Math.floor((Math.random()*range) + min);
}
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td> <td> <td> <td>
<tr>
<td> <td> <td> <td>
<tr>
<td> <td> <td> <td>
<tr>
<td> <td> <td> <td>
<script>
使用document.write()的和for循环,使根据样式节的规则风格空 细胞列x栏表。行和列 应该设置为4到16之间的随机数。每次页面为 重新加载的表应该可能是不同的大小。
for(r=4; r<16; r++){
var row ="td";
for(c=4; c<16;c++){
row+="tr";
}console.log(row);
}
</script>
</tbody>
</table>
</body>
</html>
这里的例子中,我已经添加了脚本,直接在身体追加所需的HTML,以保持它的简单
关于你的代码: 好,在你发布您使用的console.log()代码片段用于将输出写入控制台而不是在您的网页上,以便您必须将其添加到Document对象(您的页面),一个简单的方法是使用
document.write('markup here');
跟着this link了解写入方法。
关于如何生成行和列,即。 Math.random() * (max - min) + min
here是一些最好的解释
table {
border-spacing: 6px;
border: 1px rgb(#CCC);
}
td {
width: 20px; height: 40px;
border: 1px solid black;
cursor: pointer;
}
<table border="1">
<script type="text/javascript">
//Lets first Set Min and max here you want min to 4 and max to 16 so we declare here.
var min = 4, max =16;
var row = Math.random() * (max - min) + min;
var cols = Math.random() * (max - min) + min;
//lets print someoutput
for(var i=0;i<row;i++)
{
document.write("</tr>"); // we are printing HTML so use tags <tr> not tr
for(var j=0;j<cols;j++)
{
document.write("<td>dummy</td>"); // we are printing HTML so use tags <td> not td
}
document.write("</tr>");
}
</script>
</table>
你的双冒号是故意的吗?这段代码是如何工作的,它对OP的原始代码有什么好处?那个原始代码有什么问题? –
@DavidThomas你等回答者更新.... nd双冒号是错别字,我想更新应该有助于OP ..还剩下什么请点不只是downvote ... – RohitS
这是一个很好的例子!这是我认为它应该看起来!我真的很感激评论。正如我上面所说,我一直花时间离线试图让这个工作。 document.write是我失踪的拼图。 – HTMLnoobcs17001
您的R()
函数正在传递的参数之间生成一个随机数。你在做什么是你没有使用该随机数来打印出随机数的行/列。
我已经创建了一个名为generateRandomSizedTable
功能,包裹你的片段,与修正,打印出随机设置的行和列,并与document.onload
称为table_wrapper
包装块包裹。
function R(min, max) {
var range = Math.abs(max-min)+1;
return Math.floor((Math.random()*range) + min);
}
function generateRandomSizedTable(){
var table = "<table>";
var rows = R(4, 16);
var cols = R(4, 16);
for(r=1; r <= rows; r++){
table += "<tr>";
for(c=1; c <= cols;c++){
table+="<td></td>";
}
table += "</tr>";
}
table += "</table>";
document.getElementById("table_wrapper").innerHTML = table;
console.log(table);
}
document.onload = generateRandomSizedTable();
table {
border-spacing: 6px;
border: 1px rgb(#CCC);
margin-top: .5in;
margin-left: 1in;
}
td {
width: 40px; height: 40px;
border: 1px solid black;
cursor: pointer;
}
<div id="table_wrapper"></div>
你的代码是如何工作的?它提供了什么好处? OP的代码有什么问题,它出了什么问题?他为什么要“尝试这个*”? –
实际上我忘了添加评论与我的答案,由于连接速度慢,打开片段插件经过很多努力。我会在一分钟内记下我的观点 –
@DavidThomas感谢您指出错误。如果你发现它缺乏某处,你现在可以改进答案。 –
表与动态的行和列
Working Example CodePen
var table = document.getElementsByTagName("table")[0];
var randomNum = (function(min, max){
return function(){
return Math.floor((Math.random() * (Math.abs(max-min)+1)) + min);
}
}(4,16))
document.write(createTable(randomNum(), randomNum()));
function createTable(rowCt, colCt){
var table = "<table>";
for(var index = 0; index < rowCt; index++){
table += createRow(colCt);
}
return (table + "</table>");
}
function createRow(num){
return ("<tr>" + createColumns(num) + "</tr>")
}
function createColumns(num){
var columns = "";
for(var index = 0; index < num; index++){
columns += "<td></td>";
}
return columns;
}
table {
border-spacing: 6px;
border: 1px rgb(#CCC);
margin-top: .5in;
margin-left: 1in;
}
td {
width: 40px; height: 40px;
border: 1px solid black;
cursor: pointer;
}
<table></table>
我一直在努力做到这一点,就像你们指出我没有使用document.write()时出错,似乎不可能找到一个使用document.write不仅仅是简单的文字写作。我不知道写入可以这样使用。谢谢你的帮助!!! – HTMLnoobcs17001
你在哪里使用document.write()? – SoEzPz
我未能。我应该在哪里console.log(row);本质上是,但即使如此,我的代码并不完整。 – HTMLnoobcs17001