试图创建和更新随机颜色表

首先，我试图崩溃当然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

试图创建和更新随机颜色表

回答

相关问题