JavaScript实现99乘法表与隔行变色效果

"这篇文章主要介绍了如何使用JavaScript实现99乘法表，并且实现隔行变色的功能，包括鼠标滑过时的动态颜色变化。作者通过两种不同的判断方式（if和switch）来完成这一任务，提供了详细的代码示例。" 在JavaScript中实现99乘法表是一个常见的练习，它涉及到两个嵌套的循环来生成乘法表的每个单元格。以下是一个基本的实现方式： ```javascript var cur = 1; for (var i = 1; i <= 9; i++) { for (var j = 1; j <= i; j++) { var sum = i * j; var div = document.createElement("div"); div.id = cur; div.style.top = i * 35 + 'px'; // 假设每个单元格的高度为35像素 div.style.left = j * 105 + 'px'; // 假设每个单元格的宽度为105像素 cur++; div.innerHTML = j + "*" + i + "=" + sum; document.body.appendChild(div); } } ``` 这段代码创建了99个`div`元素，每个元素代表乘法表的一个单元格，并将其添加到HTML文档中。`top`和`left`属性用于定位每个单元格，确保它们按正确的位置排列。 为了实现隔行变色的效果，我们可以根据当前行数（`i`）的奇偶性来改变背景颜色。例如，可以使用if语句来实现： ```javascript var cur = 1; var colors = ["#00FF00", "#808080", "#FF8C00"]; // 定义三种颜色 for (var i = 1; i <= 9; i++) { for (var j = 1; j <= i; j++) { var sum = i * j; var div = document.createElement("div"); div.id = cur; div.style.top = i * 35 + 'px'; div.style.left = j * 105 + 'px'; cur++; div.innerHTML = j + "*" + i + "=" + sum; // 根据行数设置背景颜色 if (i % 3 === 0) { div.style.backgroundColor = colors[(i - 1) % colors.length]; } document.body.appendChild(div); } } ``` 在这个版本中，我们添加了一个if语句，根据`i`除以3的余数来决定使用哪一种颜色。这样，每三行就会循环使用预先定义的颜色。 同样，也可以使用switch语句来实现相同的效果： ```javascript var cur = 1; var colors = ["#00FF00", "#808080", "#FF8C00"]; for (var i = 1; i <= 9; i++) { for (var j = 1; j <= i; j++) { var sum = i * j; var div = document.createElement("div"); div.id = cur; div.style.top = i * 35 + 'px'; div.style.left = j * 105 + 'px'; cur++; div.innerHTML = j + "*" + i + "=" + sum; // 使用switch语句设置背景颜色 switch ((i - 1) % 3) { case 0: div.style.backgroundColor = colors[0]; break; case 1: div.style.backgroundColor = colors[1]; break; case 2: div.style.backgroundColor = colors[2]; break; } document.body.appendChild(div); } } ``` 以上两种方法都能够达到隔行变色的效果。对于鼠标滑过时行背景变为蓝色，以及鼠标离开后恢复原色的需求，可以使用CSS的`:hover`伪类和JavaScript事件监听来实现。当鼠标悬停在`div`上时，改变背景颜色，移开鼠标时恢复原色。 这是一个简单的JavaScript实现，可以作为基础进行扩展和优化，例如添加更复杂的交互效果或调整样式。在实际项目中，可能需要将这些代码封装到函数或类中，以便于复用和维护。