原生JS生成九宫格

生成九宫格的主要流程可以分为以下三步：

1. 根据九宫格的行列数计算出总格子数和每行格子数；
2. 循环生成格子，并设置其属性和样式；
3. 将所有生成的格子添加到页面中。

下面是一个实现九宫格的JavaScript代码示例：

// 获取容器元素
var container = document.getElementById('container');
// 定义九宫格的行列数
var num = 3;
// 计算每行格子数和总格子数
var size = container.clientWidth / num;
var total = num * num;

// 循环生成格子
for (var i = 0; i < total; i++) {
  // 创建格子元素
  var cell = document.createElement('div');
  // 设置样式和属性
  cell.style.width = size + 'px';
  cell.style.height = size + 'px';
  cell.style.float = 'left';
  cell.style.border = '1px solid #ccc';
  cell.style.boxSizing = 'border-box';
  cell.setAttribute('data-index', i);
  // 将格子添加到容器中
  container.appendChild(cell);
}

在上面的代码中，我们使用document.createElement方法来创建格子元素，并使用cell.setAttribute方法来设置其data-index属性。container.appendChild方法则将创建的格子添加到容器中。

下面是一个更为完整的九宫格实现代码示例，除了基本功能外，还实现了随机色块、点击变色和计分的功能。

// 获取容器元素
var container = document.getElementById('container');
// 定义九宫格的行列数
var num = 3;
// 计算每行格子数和总格子数
var size = container.clientWidth / num;
var total = num * num;
// 定义计分器和随机选中的格子
var score = 0;
var selected;

// 循环生成格子
for (var i = 0; i < total; i++) {
  // 创建格子元素
  var cell = document.createElement('div');
  // 设置样式和属性
  cell.style.width = size + 'px';
  cell.style.height = size + 'px';
  cell.style.float = 'left';
  cell.style.border = '1px solid #ccc';
  cell.style.boxSizing = 'border-box';
  cell.style.backgroundColor = getRandomColor();
  cell.setAttribute('data-index', i);
  // 绑定点击事件
  cell.onclick = function(event) {
    // 判断是否点击了已选中的格子
    if (this == selected) {
      // 随机选中下一个格子
      selected = container.children[Math.floor(Math.random() * total)];
      // 计分，并更新计分器和格子颜色
      score++;
      updateScore();
      updateColor();
    }
  };
  // 将格子添加到容器中
  container.appendChild(cell);
}

// 随机选中一个格子
selected = container.children[Math.floor(Math.random() * total)];

// 更新计分器内容
function updateScore() {
  var scoreElement = document.getElementById('score');
  scoreElement.innerHTML = 'Score: ' + score;
}

// 更新随机选中的格子的背景色
function updateColor() {
  // 随机生成颜色，除了已选中的格子
  var color = getRandomColor();
  while (color == selected.style.backgroundColor) {
    color = getRandomColor();
  }
  // 更新选中的格子和其它格子的背景色
  selected.style.backgroundColor = color;
  for (var i = 0; i < total; i++) {
    var cell = container.children[i];
    if (cell != selected) {
      cell.style.backgroundColor = getRandomColor();
    }
  }
}

// 获取随机颜色
function getRandomColor() {
  var colors = ['red', 'blue', 'green', 'yellow', 'orange', 'purple'];
  return colors[Math.floor(Math.random() * colors.length)];
}

// 初始化计分器
updateScore();

在上面的代码中，我们定义了一个selected变量，来表示随机选中的格子。在点击事件处理函数中，我们判断当前点击的格子是否是已选中的格子，如果是，则随机选中下一个格子，并更新计分器内容和格子颜色。updateColor()函数用于更新随机选中的格子和其它格子的背景色，避免它们和已选中的格子的颜色重复。getRandomColor()函数用于获取一个随机的颜色值，它从一个颜色数组colors中随机选择一个颜色。updateScore()函数用于更新计分器的内容。最后我们调用updateScore()函数来初始化计分器。