我正在尝试为 Barricade 创建一个游戏板，但我在第一步失败了，在指定哪些圆圈可见之前创建了一个简单的圆圈网格。
我应该用 Canvas 画吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Boardgame</title>
<style type="text/css">
.circleBase {
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
behavior: url(PIE.htc);
}
.type1 {
width: 30px;
height: 30px;
background: yellow;
border: 3px solid red
}
</style>
<script type="text/javascript">
function genDivs(){
var v = 10;
var e = document.body;
for(var i = 0; i < v; i++)
{
var row = document.createElement("circleBase type1");
for(var x = 1; x <= v; x++)
{
var cell = document.createElement("circleBase type1");
//cell.innerText = (i * v) + x;
row.appendChild(cell);
}
e.appendChild(row);
}
document.getElementById("code").innerText = e.innerHTML;
}
</script>
</head>
<body>
<input type="button" onclick="genDivs()" value="click me">
</body>
</html>
最佳答案
正确创建一个元素:
var element= document.createElement('div');
element.className = 'circleBase type1';
另外，你只需要设置 border-radius 为 50%:
.circleBase {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
behavior: url(PIE.htc);
}
关于javascript - 我的 circle-divs 不工作。为什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16779508/