Javascript 正在尝试创建一个长方体
我试图用javascript动态创建随机数量的框。然而,我有点不知道怎么做。我想我会先尝试在html上创建框。下面是我的html:Javascript 正在尝试创建一个长方体,javascript,html,Javascript,Html,我试图用javascript动态创建随机数量的框。然而,我有点不知道怎么做。我想我会先尝试在html上创建框。下面是我的html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Ramdom Boxes</title> <script src="A2Q1.js"></script
<!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框显示出来我应该是这样的:
背景色:#0000ff代码>非
颜色:#0000ff
color
用于字体颜色。您只需确保所有内容都位于
和
标记之间
此外,如果希望显示颜色,则需要使用css属性background 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>
拉姆多姆盒子
这可能会让您继续:
随机框
//创建一个循环以创建任意数量的长方体
var box_count=Math.random()*100+50;
对于(变量i=0;i
您的div需要在body标签内。还请发布A2Q1.js的内容。@j08691那个javascript文件太乱了。。。其思想是在页面上的任意位置动态创建任意数量、任意颜色的框。我想我一开始是这样做的,但我只是在画布上画对象,而不是把它们存储在任何地方。框将随着鼠标事件移动。属性数组绝对是一个巨大的帮助,我被困在如何插入变量的问题上。谢谢你!
<!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>