Javascript 尝试创建和更新随机颜色表
首先,我正在尝试速成课程javascript,所以请注意,我对其语法的理解仍然有限 我需要创建一个由28种随机颜色组成的表格,然后每次点击一个按钮进行更新。我希望在与按钮相同的页面上创建表,但我似乎只能在使用document.write时才能实现这一点,然后document.write将该表写入新页面 任何帮助清理我的代码将不胜感激。谢谢Javascript 尝试创建和更新随机颜色表,javascript,Javascript,首先,我正在尝试速成课程javascript,所以请注意,我对其语法的理解仍然有限 我需要创建一个由28种随机颜色组成的表格,然后每次点击一个按钮进行更新。我希望在与按钮相同的页面上创建表,但我似乎只能在使用document.write时才能实现这一点,然后document.write将该表写入新页面 任何帮助清理我的代码将不胜感激。谢谢 <head> <title>Random Color Generator</title> </head> &
<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>
随机颜色发生器
随机世界发生器
生成
//计数器
var i=0;
var j=0;
var k=0;
var x=0;
var y=0;
var z=0;
//定义颜色百分比的范围
var min=0;
var max=5;
//RGB值
var-r;
var g;
var b;
//杂项变量
颜色变异;
显示颜色;
var存储的颜色=新数组();
var shades=新数组('00'、'33'、'66'、'99'、'CC'、'FF');
//生成颜色表
函数rcg_generate(){
(i用HTML构建表格,然后在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);
请参见上的演示,谢谢您的回复。我不太熟悉的几件事(例如:slice.call),幸好我在这里找到了相关文章。这是最好的学习方法。如果有帮助,请验证我的答案。