JavaScript实现3x3幻方时单网格显示全部数字的问题求助

存在的问题 #

• 变量未定义报错
  1. getnums随机数生成函数中，循环判断条件使用了未声明的xy变量，该处实际应使用前面定义的数组剩余长度变量len
  2. 幻方校验逻辑中使用了未声明的xyz变量，属于笔误，该处实际要读取的是存储幻方数据的output数组
• 渲染逻辑错误
  每个格子生成时额外嵌套了x从0到8的循环，导致每个盒子都插入了全部9个数字，没有按照行列对应正确的数组下标取值，正确的下标计算公式为行号*3 + 列号

修复后完整代码 #

JavaScript #

// 初始化为数组更符合后续存储逻辑
var output = [];
let getnums = () => {
  var numsarray = [];
  var arrays = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  var len = arrays.length;
  // 替换未定义的xy为len
  while (len > 0) {
    var rans = Math.floor(Math.random() * len);
    numsarray.push(arrays[rans]);
    arrays.splice(rans, 1);
    len = len - 1;
  }
  return numsarray;
};

let done = false;
while (!done) {
  output = getnums();
  if (
    output[0] + output[1] + output[2] == 15
    && output[1] + output[4] + output[7] == 15
    && output[2] + output[5] + output[8] == 15
    && output[0] + output[3] + output[6] == 15
    && output[2] + output[4] + output[6] == 15
    && output[3] + output[4] + output[5] == 15
    && output[6] + output[7] + output[8] == 15
    // 替换未定义的xyz为output
    && output[0] + output[4] + output[8] == 15
  ) {
    console.log('it works!!!');
    console.log(output);
    done = true;
  }
}

for (var i = 0; i < 3; i++) {
  var row = document.createElement('div');
  row.className = 'row';
  for (var j = 0; j < 3; j++) {
    var box = document.createElement('div');
    box.className = 'box';
    row.appendChild(box);
    // 删除多余的x循环，按行列下标计算对应数组位置
    var nums = document.createElement('div');
    box.appendChild(nums);
    nums.textContent = output[i * 3 + j];
  }
  document.getElementById('boxParent').appendChild(row);
}

CSS #

.box {
  border: black 1.5px solid;
  background: white;
  opacity: 0.7;
  width: 175px;
  height: 150px;
  margin-top: 0px;
  cursor: pointer;
  float: left;
  position: relative;
  left: 450px;
  top: 75px;
  /* 以下为可选添加的样式，优化数字显示效果 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.row {
  display: block;
  float: left;
  width: 100%;
}

HTML #

<div id="boxParent"></div>

内容的提问来源于stack exchange，提问作者Shawn