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>

来源

2017-04-07 HTMLnoobcs17001

你在哪里使用document.write（）？ – SoEzPz

我未能。我应该在哪里console.log（row）;本质上是，但即使如此，我的代码并不完整。 – HTMLnoobcs17001

这里的例子中，我已经添加了脚本，直接在身体追加所需的HTML，以保持它的简单

关于你的代码： 好，在你发布您使用的console.log（）代码片段用于将输出写入控制台而不是在您的网页上，以便您必须将其添加到Document对象（您的页面），一个简单的方法是使用

document.write('markup here');

跟着this link了解写入方法。

关于如何生成行和列，即。 Math.random() * (max - min) + minhere是一些最好的解释

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>

来源

2017-04-07 18:27:26 RohitS

你的双冒号是故意的吗？这段代码是如何工作的，它对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>

来源

2017-04-07 18:20:34

你的代码是如何工作的？它提供了什么好处？ 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>

来源

2017-04-07 19:23:37 SoEzPz

我一直在努力做到这一点，就像你们指出我没有使用document.write（）时出错，似乎不可能找到一个使用document.write不仅仅是简单的文字写作。我不知道写入可以这样使用。谢谢你的帮助！！！ – HTMLnoobcs17001

Javascript随机生成

回答

相关问题