根据上面代码 输出红色div时按顺序赋予1~10的数字

可以通过在输出红色的 div 时添加文本内容来为其赋值。修改后的代码如下：

for (var i = 1; i <= 10; i++) {
  for (var j = 1; j <= 10; j++) {
    if (i === j) {
      document.write('<div style="width: 10px; height: 10px; display: inline-block; background-color: red;">'+i+'</div>');
    } else {
      document.write('<div style="width: 10px; height: 10px; display: inline-block;"></div>');
    }
  }
  document.write('<br>');
}

这样，当输出红色的 div 时，会在其中添加对应的数字。

相关问题

用前端代码写一个1~10大小的矩阵动画

好的，我可以为您提供一个使用CSS3动画和JavaScript实现的1~10大小的矩阵动画，代码如下：

HTML代码：

<div class="matrix-container">
  <div class="matrix-row">
    <div class="matrix-cell">1</div>
    <div class="matrix-cell">2</div>
    <div class="matrix-cell">3</div>
    <div class="matrix-cell">4</div>
    <div class="matrix-cell">5</div>
  </div>
  <div class="matrix-row">
    <div class="matrix-cell">6</div>
    <<div class="matrix-cell">7</div>
    <div class="matrix-cell">8</div>
    <div class="matrix-cell">9</div>
    <div class="matrix-cell">10</div>
  </div>
</div>

CSS3代码：

.matrix-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 300px;
  width: 300px;
  border: 2px solid black;
  border-radius: 5px;
}

.matrix-row {
  display: flex;
  flex-direction: row;
}

.matrix-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 50px;
  font-size: 24px;
  font-weight: bold;
  color: white;
  background-color: blue;
  border-radius: 5px;
  animation-name: size-change;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes size-change {
  0% { transform: scale(1); }
  50% { transform: scale(1.5); }
  100% { transform: scale(1); }
}

JavaScript代码：

const cells = document.querySelectorAll('.matrix-cell');

cells.forEach((cell) => {
  cell.addEventListener('mouseover', () => {
    cell.style.backgroundColor = 'red';
  });
  
  cell.addEventListener('mouseout', () => {
    cell.style.backgroundColor = 'blue';
  });
});

这段代码会在页面中创建一个矩阵，数字从1到10排列在其中。每个数字单元格都有一个CSS3动画，会周期性地变换大小。当鼠标移动到数字单元格上时，背景色会变为红色，移开后又会变回蓝色。

一个按钮鼠标移动到上面是 div显示出来 移走时div隐藏用代码实现一下

好的，这是一个简单的示例代码：

<button id="myButton" onmouseover="showDiv()" onmouseout="hideDiv()">按钮</button>

<div id="myDiv" style="display:none;">这是一个div</div>

<script>
function showDiv() {
  document.getElementById("myDiv").style.display = "block";
}

function hideDiv() {
  document.getElementById("myDiv").style.display = "none";
}
</script>

当鼠标移动到按钮上时，调用showDiv()函数显示div；当鼠标移开按钮时，调用hideDiv()函数隐藏div。