0

I am trying to create a game board for Barricade but I am failing with the first step, creating a simple grid of circles before specifying which circles are visible.

Should I draw it with a 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>
4

2 に答える 2

0

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
}

ここにデモがあります。

于 2013-05-27T19:56:18.873 に答える
0

要素を適切に作成します。

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);
}
于 2013-05-27T19:54:26.117 に答える