CSS解决方案

Question

我正在制作一个tic-tac-toe游戏，我需要在其中创建按钮，然后向其中添加事件。连续三个按钮，下一行有3个按钮，下一行有三个按钮。我使用了break标记以及\ r \ n表示法仍然不起作用。请帮忙。

 <body>
    <div id="displaytable"></div>
    <script src='jquery-3.3.1.js'></script>
     <script>
      var table= [];
       var blocks = 9;
       var player,boardId;
      winningCombinations = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];


    $(document).ready(function(){

        buttonId = 0;

        for (var index = 0; index < blocks; index++) {
            button1 = document.createElement("button");

            if((index==2||index==5||index==8)&&(buttonId==3||buttonId==6||buttonId==9)){
                button1.innerHTML="\r\n"+"<br>";
            }

            button1.innerHTML = " + " ;
            button1.id = buttonId;
            button1.setAttribute("value", buttonId);
            button1.setAttribute("text", buttonId);

            button1.style.fontFamily = "Times New Roman";
            button1.style.backgroundSize = "50px";
            button1.style.backgroundColor = "#C0C0C0";
            button1.style.fontSize = "25px";
            button1.style.marginBottom = "10px";
            button1.style.marginLeft = "5px";   
            button1.style.marginRight = "5px";
            document.body.appendChild(button1);
            buttonId++;



    }
});

  </script>

</body>

Answer 1

CSS解决方案

您可以使用CSS，将按钮显示为块并将它们浮动到左侧。

清除每个第三个按钮。

＆＃13;

var table = [];
var blocks = 9;
var player, boardId;
winningCombinations = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6]
];


$(document).ready(function() {

  buttonId = 0;

  for (var index = 0; index < blocks; index++) {
    button1 = document.createElement("button");

    if ((index == 2 || index == 5 || index == 8) && (buttonId == 3 || buttonId == 6 || buttonId == 9)) {
      button1.innerHTML = "\r\n" + "<br>";
    }

    button1.innerHTML = " + ";
    button1.id = buttonId;
    button1.setAttribute("value", buttonId);
    button1.setAttribute("text", buttonId);

    button1.style.fontFamily = "Times New Roman";
    button1.style.backgroundSize = "50px";
    button1.style.backgroundColor = "#C0C0C0";
    button1.style.fontSize = "25px";
    button1.style.marginBottom = "10px";
    button1.style.marginLeft = "5px";
    button1.style.marginRight = "5px";
    document.body.appendChild(button1);
    buttonId++;



  }
});

＆＃13;

 button {
  display: block;
  float: left;
}
button:nth-of-type(3n+1) {
  clear: both;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="displaytable"></div>

＆＃13;

JS解决方案

＆＃13;

var table = [];
var blocks = 9;
var player, boardId;
winningCombinations = [
  [0, 1, 2],
  [3, 4, 5],
  [6, 7, 8],
  [0, 3, 6],
  [1, 4, 7],
  [2, 5, 8],
  [0, 4, 8],
  [2, 4, 6]
];


$(document).ready(function() {

  buttonId = 0;

  for (var index = 0; index < blocks; index++) {
    button1 = document.createElement("button");

  button1.innerHTML = " + ";
    button1.id = buttonId;
    button1.setAttribute("value", buttonId);
    button1.setAttribute("text", buttonId);

    button1.style.fontFamily = "Times New Roman";
    button1.style.backgroundSize = "50px";
    button1.style.backgroundColor = "#C0C0C0";
    button1.style.fontSize = "25px";
    button1.style.marginBottom = "10px";
    button1.style.marginLeft = "5px";
    button1.style.marginRight = "5px";
    document.body.appendChild(button1);
    if( (index+1) % 3 == 0 ) {
      document.body.appendChild( document.createElement("br") );
    }
    buttonId++;



  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="displaytable"></div>

＆＃13;

Answer 2

您附加br的条件不正确，我在js bin

中添加了修改后的代码

＆＃13;

var table= [];
       var blocks = 9;
       var player,boardId;
      winningCombinations = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];


    $(document).ready(function(){

        buttonId = 0;

        for (var index = 0; index < blocks; index++) {
            button1 = document.createElement("button");
 
            button1.innerHTML = " + " ;
            button1.id = buttonId;
            button1.setAttribute("value", buttonId);
            button1.setAttribute("text", buttonId);

            button1.style.fontFamily = "Times New Roman";
            button1.style.backgroundSize = "50px";
            button1.style.backgroundColor = "#C0C0C0";
            button1.style.fontSize = "25px";
            button1.style.marginBottom = "10px";
            button1.style.marginLeft = "5px";   
            button1.style.marginRight = "5px";
            document.body.appendChild(button1);
          
          if((index==2||index==5||index==8)){
                document.body.appendChild(document.createElement('br'));
            }

            buttonId++;



    }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="displaytable"></div>

＆＃13;

如何让按钮到javascript中的下一行

2 个答案:

CSS解决方案

JS解决方案