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隨機生成

回答

相關問題