2014-09-22 68 views
1

有了這個HTML表:使得隨機彩色數字

<html> 
<head> 
<meta charset="UTF-8"> 
<title>Bonoloto</title> 
<script src="bonoloto.js"></script> 
<style> 
    table {border-collapse: collapse;} 
    td{border: 1px solid #000000; text-align: center; width: 6%;} 
</style> 
</head> 
<body> 
<script> 
    tables(); 
</script> 
</body> 
</html> 

而且此javascript:

var counter = 0; 
var nr1 = Math.floor(Math.random() * 49 + 1), 
nr2 = Math.floor(Math.random() * 49 + 1), 
nr3 = Math.floor(Math.random() * 49 + 1), 
nr4 = Math.floor(Math.random() * 49 + 1), 
nr5 = Math.floor(Math.random() * 49 + 1); 

document.write("Numbers: "+nr1+" "+nr2+" "+nr3+" "+nr4+" "+nr5); 

function tables(){ 

document.write("<table>"); 
     for(i = 1; i < 50; i++) { 
       if(counter == 10) { 
        counter = 0; 
        document.write("<tr>"); 
       } 
       if(i==nr1){ 
        document.write("<td style='background-color: cadetblue'>" + i + "</td>"); 
       }else{ 
        document.write("<td>" + i + "</td>"); 
       } 

       if(counter == 10) { 
        counter = 0; 
        document.write("</tr>"); 
       } 
       counter++; 
      } 

document.write("</table>"); 
} 

這是輸出:

colored table 我必須強調所有喜歡的數字25突出顯示。數字是隨機產生的,目的是在表格中突出顯示它們。我被卡在這裏:

   if(i==nr1){ 
        document.write("<td style='background-color: cadetblue'>" + i + "</td>"); 
       }else{ 
        document.write("<td>" + i + "</td>"); 
       } 

如果我放置更多的if語句表列將「乘」。我不能讓這種情況正常工作...

回答

1

而不是nrX s,使用一個由五個隨機數組成的數組。然後在if,檢查數組是否包含i。像這樣:

var counter = 0, 
 
    randoms = [], 
 
    n; 
 
for (n = 0; n < 5; n++) { 
 
    randoms.push(Math.floor(Math.random() * 49 + 1)); 
 
} 
 

 
function tables(){ 
 
    document.write("<table>"); 
 
    for(var i = 1; i < 50; i++) { 
 
     if(counter == 10) { 
 
      counter = 0; 
 
      document.write("<tr>"); 
 
     } 
 
     if (randoms.indexOf(i) > -1) { 
 
      document.write("<td style='background-color: cadetblue'>" + i + "</td>"); 
 
     } else { 
 
      document.write("<td>" + i + "</td>"); 
 
     } 
 
     if (counter == 10) { 
 
      counter = 0; 
 
      document.write("</tr>"); 
 
     } 
 
     counter++; 
 
    } 
 
    document.write("</table>"); 
 
} 
 
tables();
請注意, document.write被認爲是不好的做法,請改用一些DOM操作方法。在你的情況下, HTMLTableElement Interface似乎是合適的。

您可以改進代碼,因爲現在可以將加倍的隨機數加到數組中。

0

你可以試試這個:

var counter = 0; 
 
var randomNumbers = []; 
 
for (var i = 0; i <= 5; i++) { 
 
\t randomNumbers.push(Math.floor(Math.random() * 49 + 1)); 
 
}; 
 
document.write("Numbers: "); 
 
for (var i = randomNumbers.length - 1; i >= 0; i--) { 
 
\t document.write(randomNumbers[i]+", "); 
 
}; 
 

 
function tables(){ 
 

 
\t document.write("<table>"); 
 
\t for(i = 1; i < 50; i++) { 
 
\t \t var found = false; 
 
\t \t if(counter == 10) { 
 
\t \t \t counter = 0; 
 
\t \t \t document.write("<tr>"); 
 
\t \t } 
 

 
\t \t for (var j = randomNumbers.length - 1; j >= 0; j--) { 
 
\t \t \t if(i == randomNumbers[j]){ 
 
\t \t \t \t document.write("<td style='background-color: cadetblue'>" + i + "</td>"); 
 
\t \t \t \t found = true; 
 
\t \t \t \t break; 
 
\t \t \t } 
 
\t \t }; 
 
\t \t if(!found){ 
 
\t \t \t document.write("<td>" + i + "</td>"); 
 
\t \t } 
 

 
\t \t if(counter == 10) { 
 
\t \t \t counter = 0; 
 
\t \t \t document.write("</tr>"); 
 
\t \t } 
 
\t \t counter++; 
 

 
\t } 
 

 
\t document.write("</table>"); 
 
} 
 
tables();

0

試試這個:

HTML:

<div id="container"></div> 

JQUERY(你可以看到使事情變得更簡單)

var colors=['red','yellow','blue','green']; 
    var i; 
    $("#container").append("<table></table>"); 
    var tds=""; 
    for(i=1;i<=50;i++){ 
    if(i%10 == 0){ 
     tds+="<td style='background:"+colors[Math.floor(Math.random()*10)%4]+"'>"+i+"</td>" 
     $("table").append("<tr>"+tds+"</tr>"); 
     tds=""; 
    } 
    else{ 
     tds+="<td style='background:"+colors[Math.floor(Math.random()*10)%4]+"'>"+i+"</td>"; 
    } 
    } 

CSS:

table,td{ 
    border:solid 1px; 
} 
table{ 
    border-collapse:collapse; 
} 
td{ 
    width:6%; 
} 

Live FIDDLE