一、基础打印方法
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('
'+j+"*"+i+"="+i*j+' | '); } document.write('
在这个版本中,我们将乘法表放入一个HTML table标签中。为了方便美化,我们将列与列之间加入了HTML表格单元格标签td,并将每一行使用HTML表格行标签tr括起来。请注意顺序,先写入tr标签,再写每个td标签。
三、使用CSS美化乘法表
<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动画效果
<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实现动画效果
<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中。这种方法在单页面应用或开发过程中更为实用。