使用JS打印九九乘法表

UJLSS • 2025-04-18 13:40 • 编程

一、基础打印方法

for(var i=1;i<=9;i++){
  for(var j=1;j<=i;j++){
    document.write(i+"*"+j+"="+i*j+" ");
  }
  document.write("
");
}

首先，我们尝试简单地使用两层for循环打印出1-9的乘法表。第一层循环控制行数，第二层循环控制每行输出的列数。在内层循环中，输出当前行和列对应的乘积。

二、美化乘法表

document.write('');
for(var i=1;i<=9;i++){
  document.write('');
  for(var j=1;j<=i;j++){
    document.write('');
  }
  document.write('');
}
document.write(''+j+"*"+i+"="+i*j+'
');

在这个版本中，我们将乘法表放入一个HTML table标签中。为了方便美化，我们将列与列之间加入了HTML表格单元格标签td，并将每一行使用HTML表格行标签tr括起来。请注意顺序，先写入tr标签，再写每个td标签。

三、使用CSS美化乘法表


  table{
    border-collapse: collapse; /*去掉边框*/
  }
  td{
    width: 100px;
    height: 30px;
    text-align: center;
    vertical-align:middle;
    border: 1px solid black;
  }
  td:nth-child(odd){ /*奇数列单元格*/
    background-color: #f2f2f2;
  }

<script>
  document.write('<table>');
  for(var i=1;i<=9;i++){
    document.write('<tr>');
    for(var j=1;j<=i;j++){
      document.write('<td>'+j+"*"+i+"="+i*j+'</td>');
    }
    document.write('</tr>');
  }
  document.write('</table>');
</script>

在第三个版本中，我们在HTML文件中加入CSS样式。使用border-collapse: collapse属性去掉了表格单元格之间的边框。我们也为表格单元格设置了宽度和高度，以及文字和单元格垂直对齐方式。另外，我们使用了nth-child选择器，将奇数列的单元格背景色设为灰色，以增强可读性。

四、使用CSS动画效果


  table{
    border-collapse: collapse; /*去掉边框*/
  }
  td{
    width: 100px;
    height: 30px;
    text-align: center;
    vertical-align:middle;
    border: 1px solid black;
    transition-duration: 0.5s;
  }
  td:hover{
    background-color: yellow; /*鼠标悬停时的背景色*/
    color: red;
    transform: scale(1.2,1.2); /*鼠标悬停时单元格放大*/
  }
  td:nth-child(odd){
    background-color: #f2f2f2;
  }
  table{
    margin: auto; /*水平居中*/
}

<script>
  document.write('<table>');
  for(var i=1;i<=9;i++){
    document.write('<tr>');
    for(var j=1;j<=i;j++){
      document.write('<td>'+j+"*"+i+"="+i*j+'</td>');
    }
    document.write('</tr>');
  }
  document.write('</table>');
</script>

在第四个版本中，我们使用CSS动画效果为表格单元格增加互动性。鼠标悬停时，单元格的背景色变成黄色，文字的颜色变成红色。同时，单元格逐渐放大（scale(1.2,1.2)），创造出弹跳的视觉效果。我们也为整个表格设置了居中对齐，使得乘法表更加美观。

五、使用jQuery实现动画效果


  table{
    border-collapse: collapse; /*去掉边框*/
  }
  td{
    width: 100px;
    height: 30px;
    text-align: center;
    vertical-align:middle;
    border: 1px solid black;
  }
  td:nth-child(odd){
    background-color: #f2f2f2;
  }
  table{
    margin: auto; /*水平居中*/
}

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
  $(document).ready(function(){
    $('td').hover(function(){ //鼠标悬停事件
      $(this).animate({
        backgroundColor:"yellow",
        color:"red",
        fontSize:"20px" //放大字体大小
      }, 500);
    },
    function(){ //离开事件
      $(this).animate({
        backgroundColor:"#ffffff",
        color:"#000000",
        fontSize:"16px" //恢复字体大小
      }, 500);
    });
    var $table = $('<table>');
    for(var i=1;i<=9;i++){
      var $tr = $('<tr>');
      for(var j=1;j<=i;j++){
        var $td = $('<td>').text(j+"*"+i+"="+i*j);
        $tr.append($td);
      }
      $table.append($tr);
    }
    $('body').append($table); //追加到body中
  });
</script>

在第五个版本中，我们使用jQuery库来完全改写乘法表的实现。首先使用jQuery库处理鼠标悬停的事件，通过调整CSS中的属性渐变地调整表格单元格的颜色和字体大小。然后，我们使用jQuery库创建并操作HTML元素，替代了原有的document.write方法。最后，将创建的表格追加到body中。这种方法在单页面应用或开发过程中更为实用。

原创文章，作者：UJLSS，如若转载，请注明出处：https://www.506064.com/n/369964.html