我正在尝试使用 javascript 动态创建随机数量的框。但是，我对如何做到这一点有点迷茫。我想我会先尝试在 html 上创建框。所以，这是我的html：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ramdom Boxes</title>
<script src="A2Q1.js"></script>
</head>
<div id="piece8" class="pieces" style="color:#0000ff; top: 50px; left: 50px; width: 60px; height: 60px; cursor: pointer;"></div>
<body>
</body>
</html>
不知何故，盒子没有出现。但是，当我在浏览器中检查元素时，它似乎在那里但没有颜色。如何解决此问题以显示一个简单的 2d 框
我应该看起来像这样：http: //jsfiddle.net/FHUeE/
它background-color:#0000ff;不是color:#0000ff; color字体颜色。
您只需要确保所有内容都在<body>and</body>标记之间。
如果要显示颜色，还需要使用 css 属性 background-color 。color 改变文本颜色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ramdom Boxes</title>
<script src="A2Q1.js"></script>
</head>
<body>
<div id="piece8" class="pieces" style="background-color:#0000ff; top: 50px; left: 50px; width: 60px; height: 60px; cursor: pointer;"></div>
</body>
</html>
这可能会让你继续：
http://codepen.io/anon/pen/FjrxA
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Random Boxes</title>
</head>
<body>
<script>
// Make a loop to create a random amount of boxes
var box_count = Math.random() * 100 + 50;
for (var i = 0; i < box_count; i++) {
// Define an array of css attributes
var attr =[
// Assign a colour to the box
'background-color:#' + parseInt(Math.random() * 0xFFFFFF, 10).toString(16),
// Place the box somewhere inside the window
'left:' + Math.random() * window.innerWidth + 'px',
'top:' + Math.random() * window.innerHeight + 'px',
// Give the box a random size
'width:' + Math.random() * 100 + 'px',
'height:' + Math.random() * 100 + 'px','position: absolute'
];
// Join the attributes together with semi-colon and write the div to the document
// Note: Document write happens at the place where the script is executed
document.write('<div style="' + attr.join(';') +'"></div>');
}
</script>
</body>
</html>