Question

[！[paintbrush.jpg

var setGridBtn = document.getElementById("brush");
setGridBtn.addEventListener("click", getUserInput);

var rag = document.getElementById("rag");
rag.addEventListener("click", clearGrid);

var container = document.getElementById("container");

var parentEl = container;
parentEl.addEventListener("mouseover", function(e) {
  e.target.style.backgroundColor = colors();
});

function getUserInput() {
  var userInput = prompt("Please choose a grid size to paint with…");

  function genDivs(numCells) {
    for (var i = 0; i < numCells; i++) {
      row = document.createElement("div");
      row.classList.add("rowStyle");
      row.style.width = 400 / numCells;
      row.style.height = 400 / numCells;

      for (var x = 1; x <= numCells; x++) {
        cell = document.createElement("div");
        cell.classList.add("cellStyle");
        row.appendChild(cell);
      }
      parentEl.appendChild(row);
      parentEl.classList.add("parentElStyles")
    }
  }
  genDivs(userInput);
}

function colors() {
  let colorArray = [];

  for (let i = 0; i < 3; i++) {
    colorArray.push(Math.floor(Math.random() * (255 - 0) + 0));
  }
  // rgb -> hex
  let color = colorArray
    .map(x => x.toString(16))
    .join('');

  return `#${color}`;
}

function clearGrid() {
  parentEl.innerHTML = "";
}

/*
* {
	border: 1px dashed red;
}
*/

.rowStyle {
  display: block;
  float: left;
}

.cellStyle {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #ccc;
}

#brush {
  width: 20%;
}

#rag {
  width: 17%;
  margin-bottom: 1%;
}

.centered {
  text-align: center;
}

.parentElStyles {
  position: absolute;
  top: 31.0%;
  left: 31.89%;
  z-index: 1;
}

hr {
  width: 55%;
  color: #ddd;
  background-color: #ddd;
}

#frame {
  border: 8px solid grey;
  width: 75%;
  height: 65%;
  margin: 5% auto;
}

<body>
  <div class="centered">
    <img src="img/paintbrush.jpg" id="brush">
    <img src="img/paintrag.jpg" id="rag">
    <hr>
  </div>
  <div id="container"></div>

  <script src="js/scriptsMod.js"></script>
</body>

</html>

] 1] 1嗨，我用Javascript动态创建了一个div网格，但希望在网格中的每个单元格周围显示1px边框，并附加一个不确定的外部边框宽度（例如，从1到12像素宽的任何地方）。我希望外部边界在页面加载时可见，内部单元格在提示时根据用户的输入显示。出于某种原因，当我运行代码片段时，图像（要单击的图像）没有显示，而且是提示用户选择网格大小时的网格。我还注意到该程序不能与html doctype一起运行，但确实可以运行。预先谢谢你……

如何创建具有可见边框的div动态网格并使其具有响应能力

0 个答案: