試圖創建和更新隨機顏色表

首先，我試圖崩潰當然JavaScript，所以請注意我仍然限制在我的理解其語法。試圖創建和更新隨機顏色表

我需要創建一個28個隨機顏色的表格，然後每次點擊一個按鈕就更新它。我想在按鈕的同一頁面上創建表格，但我似乎只能在使用document.write時才能使用它，然後使用該表格寫入新頁面。

任何幫助清理我的代碼將不勝感激。謝謝！在HTML

<head> 
<title>Random Color Generator</title> 
</head> 

<body> 
<h2>Random World Generator</h2> 
<button id="rcg_generate_button" onclick="rcg_generate()">Generate</button> 

<script type="text/javascript"> 

// Counters 
var i = 0; 
var j = 0; 
var k = 0; 

var x = 0; 
var y = 0; 
var z = 0; 

// Define range for percentage of color 
var min = 0; 
var max = 5; 

// RGB values 
var r; 
var g; 
var b; 

//Misc Vars 
var color; 
var display_color; 
var stored_colors = new Array(); 
var shades = new Array('00','33','66','99','CC','FF'); 


//Generate Color Table 
function rcg_generate() { 
    while (i <= 27) { 
     r = Math.round(Math.random() * (max-min) + min); 
      g = Math.round(Math.random() * (max-min) + min); 
     b = Math.round(Math.random() * (max-min) + min); 

     color = shades[r] + shades[g] + shades[b]; 

     stored_colors[i] = color; 

     i++; 

    } 


    document.write('<table cellspacing="0" id="grid">'); 

    for (k = 0; k <= 3; k++) { 
     document.write('<tr>'); 
      for (j = 0; j <= 6; j++) { 
       display_color = stored_colors[x] 
       document.write('<td style="background: #'+display_color+'; height: 30px; width: 75px;">'); 
       document.write('<p align = "center">'+display_color+'<\/p>'); 
       document.write('<\/td>'); 
       x++; 
      } 
     document.write('<\/tr>'); 
    } 
    document.write('<\/table>'); 

} 

</script> 

</body> 
</html>

來源

2013-06-12 Chad Blackford

http://stackoverflow.com見演示/ questions/802854/why-is-document-write-considered-a-bad-practice http://javascript.info/tutorial/document-write – Patashu

建立你的表，然後在您的JS選擇所有td元素，改變他們的背景顏色：

function colors() { 
    [].slice.call (document.querySelectorAll ('#colors td')). forEach (function (tdEl) { 
     var r = Math.round (Math.random() * (max - min) + min), 
      g = Math.round (Math.random() * (max - min) + min), 
      b = Math.round (Math.random() * (max - min) + min); 

     tdEl.style.backgroundColor = '#' + shades[r] + shades[g] + shades[b]; 
    }); 
    }  

    button.addEventListener ('click', colors, false);

在http://jsfiddle.net/jstoolsmith/zzzUd/

來源

2013-06-12 06:38:43 HBP

謝謝你的迴應。很少有我不熟悉的東西（即：slice.call），幸好我在這裏找到了關於它的文章。 –

它是學習的最佳方式。驗證我的答案，如果它有幫助。 – HBP

試圖創建和更新隨機顏色表

回答

相關問題