gpt4 book ai didi

javascript - 尝试创建和更新随机颜色表

转载 作者:行者123 更新时间:2023-11-30 05:47:38 24 4
gpt4 key购买 nike

首先,我正在尝试速成 javascript,所以请注意,我对其语法的理解仍然有限。

我需要创建一个包含 28 种随机颜色的表格,然后在每次单击按钮时更新它。我想在与按钮相同的页面上创建表格,但我似乎只能在使用 document.write 时让它工作,然后将表格写入新页面。

如能帮助清理我的代码,我们将不胜感激。谢谢!

<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>

最佳答案

用 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);

http://jsfiddle.net/jstoolsmith/zzzUd/ 查看演示

关于javascript - 尝试创建和更新随机颜色表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17057492/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com