Question

我正在尝试为Barricade创建一个游戏板，但是我在第一步失败了，在指定哪些圆圈可见之前创建一个简单的圆圈网格。

我应该用画布画它吗？

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

Answer 1

正确创建元素：

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

Answer 2

document.createElement()期望标记名称为"p"，"div"等。您可以使用

创建<div/>

var row = document.createElement("div");

据我了解，您不需要将类添加到行中，只需添加到单元格中：

var row = document.createElement("div"); 
for(var x = 1; x <= v; x++)
{ 
    var cell = document.createElement("div");
    cell.setAttribute("class", "circleBase type1");
    row.appendChild(cell); 
}

要在浮动单元格时保留行，请使用

body > div:after {
    display: block;
    content: '';
    clear: both;
}

.type1 {
    float: left;
    width: 30px;
    height: 30px;
    background: yellow;
    border: 3px solid red
}

Here is a demo

我的圈子不起作用。为什么？

2 个答案: