Question

因此，我正在使用JavaScript和HTML作为学校的项目制作一个井字游戏，老师要求我们尽可能地绘制＆＃34;＆＃34;不同尺寸的板3x3或4x4。

这就是我尝试做的事情。

＆＃13;

window.addEventListener("load", onLoad, false)

function onLoad() {
  var wins = [7, 56, 448, 73, 146, 292, 273, 84];
  var mainDiv = document.getElementById("mainDiv");
  mainDiv.style.background = "#000000";
  mainDiv.style.width = "306px";
  mainDiv.style.height = "306px";
  mainDiv.style.border = "solid";
  mainDiv.style.borderColor = "#79BDEB";
  mainDiv.style.position = "absolute";
  mainDiv.style.left = "10px";
  mainDiv.style.top = "70px";
  //select.addEventListener("change", onChange, false);
}

function onChange() {
  var select = document.getElementById("mySelect").value;
  var main = document.getElementById("mainDiv");
  if (select == 3) {
    three();
  } else if (select == 4) {
    four();
  } else if (select == 5) {
    five();
  } else {
    six();
  }
  main.innerHTML = "";
  counter = 0;
}

function three() {
  var main = document.getElementById("mainDiv");
  for (var i = 0; i < 3; i++) {
    for (var j = 0; j < 3; j++) {
      var small = document.createElement("div");
      main.appendChild(small);
      small.style.background = "#52498F";
      small.style.width = "100px";
      small.style.height = "100px";
      small.style.border = "solid";
      small.style.borderColor = "#000000";
      small.style.position = "absolute";
      small.style.left = j * 100 + "px";
      small.style.top = i * 100 + "px";
      small.addEventListener("mousedown", onDown, false);
    }
  }
  var state = false;

  function onDown(e) {
    var small = e.target;
    small.style.background = "#f0f0f0";
    small.style.fontSize = "72px";
    small.style.fontFamily = "Arial";
    if (!state) {
      small.innerHTML = "x";
    } else {
      small.innerHTML = "o";
    }
    state = !state;
    small.style.textAlign = "center";
  }
}

function four() {
  var main = document.getElementById("mainDiv");
  for (var i = 0; i < 4; i++) {
    for (var j = 0; j < 4; j++) {
      var small = document.createElement("div");
      main.appendChild(small);
      small.style.background = "#52498F";
      small.style.width = "75px";
      small.style.height = "75px";
      small.style.border = "solid";
      small.style.borderColor = "#000000";
      small.style.position = "absolute";
      small.style.left = j * 75 + "px";
      small.style.top = i * 75 + "px";
      small.addEventListener("mousedown", onDown, false);
    }
  }
  var state = false;

  function onDown(e) {
    var small = e.target;
    small.style.background = "#f0f0f0";
    small.style.fontSize = "60px";
    small.style.fontFamily = "Arial";
    if (!state) {
      small.innerHTML = "x";
    } else {
      small.innerHTML = "o";
    }
    state = !state;
    small.style.textAlign = "center";
  }
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Tic-tac-toe</title>
  <script src="logic.js"></script>
  <style>
    #mySelect {
      font-size: 24px;
    }
    #myColor {
      font-size: 24px;
    }
  </style>
</head>

<body>
  <select id="mySelect" onchange="onChange()">
    <option value="3">3 x 3</option>
    <option value="4">4 x 4</option>
    <option value="5">5 x 5</option>
    <option value="6">6 x 6</option>
  </select>
  <select id="myColor" onchange="color()">
    <option value="11">Blue</option>
    <option value="12">Green</option>
    <option value="13">Red</option>
  </select>
  <div id="mainDiv"></div>
  <script type="text/javascript" src="cordova.js"></script>
</body>

</html>

＆＃13;

＆＃13; 而我的问题是小div不会在主要的Div中画画。奇怪的是，在我的一个朋友的PC上它完美地工作。但是对于我和其他几个朋友来说，它并没有。

Answer 1

我的问题是小div不会在mainDiv中绘制

这是因为你首先使用所需的fn循环绘制元素，但之后你使用{{1}清除整个#mainDiv }

此外，不是创建不同的功能，如main.innerHTML = "";，three()，four() ...
你可以简单地创建一个 five()并向该函数传递你需要应用的迭代次数，如：

oneField(i, j, n)

其中select.addEventListener("change", createMap, false); function createMap() { main.innerHTML = ""; // Clear first, not afterwards! var n = this.value; // 3, 4, 5, ... for(var i=0; i<n; i++) for(var j=0; j<n; j++) oneField(i, j, n); counter = 0; turn = 0; }可用于使用简单数学n

设置字段单元格宽度

关于 HTML和样式，我会创建一个表元素和TR与TD单元格而不是DIV，但我不知道您的作业的详细信息。另外，我不是为每个元素重新创建样式，而是创建一个fieldWidth = 300 / n规则，如：

style

在任何情况下，这都是使用DIV的示例：

#mainDIv > div {
    /* Cell styles here */
}

function el(id){ return document.getElementById(id); }

function css(el, prop, val){
  if (typeof prop==="object") {
    for(var key in prop) el.style[key] = prop[key];
  } else {
    el.style[prop] = val;
  }
}

var wins    = [7, 56, 448, 73, 146, 292, 273, 84],
    size    = 300,
    turn    = 0, // 0=O, 1=X
    counter = 0,
    select  = el("mySelect"),
    color   = el("myColor"),
    main    = el("mainDiv");

css(main, {
      background : "#000",
      width      : size+"px",
      height     : size+"px",
      border     : "3px solid #79BDEB",
      position   : "absolute",
      left       : "10px",
      top        : "70px"
    });

select.addEventListener("change", createMap, false);

function oneField(i, j, n){
  var field = document.createElement("div"),
      w = size / n;
  css(field, {
      background : "#52498F",
      width      : w-2 +"px", // -2 is to account 1px border
      height     : w-2 +"px",
      border     : "1px solid #000",
      position   : "absolute",
      left       : j*w +"px",
      top        : i*w +"px",
      fontSize   : w-20 +"px",
      lineHeight : w-15 +"px",
      textAlign  : "center" 
  });
  main.appendChild(field);
  field.addEventListener("mousedown", onDown, false);
  //return field; // Return the created square field HTMLElement
}

function createMap() {
  main.innerHTML = "";
  var n = this.value;
  for(var i=0; i<n; i++)  for(var j=0; j<n; j++)  oneField(i, j, n);
  counter = 0;
  turn = 0;
}

function onDown(e) {
  var targ = e.target;
  css(targ, {
    background : "#f0f0f0" 
  });

  turn ^= 1; // Toggle turn 1,0,1,0...
  targ.innerHTML = turn ? "x" : "o" ;
}

* {
  margin: 0;
  padding: 0;
}
body {
  font: 16px/1 Helvetica, Arial, sans-serif;
  color: #444;
}
#mySelect,
#myColor {
  font-size: 24px;
}

Answer 2

而不是使用div进行设计，为什么不使用表？它更简单：）

这是 jquery ：

$("select").change(function(){
  var table = $("table").html("");
  var tr="";
  var size = $(this).val().charAt(0);
  for(var i=1; i<=size; i++){
    for(var j=1; j<=size; j++)
      tr+="<td></td>";
    $(table).append("<tr>"+tr+"</tr>");
    tr="";
  }
});

DEMO

＆＃34;绘图＆＃34;不同尺寸的Tic-tac-toe板

2 个答案: