JavaScript 乘法表:生成交互式表格383


JavaScript 是一种功能强大的编程语言,可用于创建交互式且动态的网页。它提供了广泛的工具和库,可帮助开发人员构建复杂的应用程序。其中一项有用的功能是能够生成乘法表。

创建一个简单的乘法表

要使用 JavaScript 创建简单的乘法表,您可以使用嵌套循环来迭代数字并计算它们的乘积。以下是一个示例代码段:```javascript
const numRows = 10;
const numCols = 10;
// 创建一个表格元素
let table = ('table');
// 遍历行
for (let i = 0; i < numRows; i++) {
// 创建新行
let row = ('tr');
// 遍历列
for (let j = 0; j < numCols; j++) {
// 计算乘积
let product = i * j;
// 创建新单元格
let cell = ('td');
= product;
// 将单元格添加到行
(cell);
}
// 将行添加到表格
(row);
}
// 将表格添加到页面
(table);
```
此代码将生成一个 10x10 乘法表,其中显示数字 0 到 9 的所有乘积。

创建交互式乘法表

您可以使用 JavaScript 进一步增强乘法表,使其具有交互性。例如,您可以允许用户指定乘法表的行数和列数,还可以突出显示鼠标悬停的单元格。

以下是一个实现此功能的示例代码段:```javascript
// 获取用户输入
let numRows = prompt('输入行数:');
let numCols = prompt('输入列数:');
// 验证输入
if (!numRows || !numCols || isNaN(numRows) || isNaN(numCols)) {
alert('无效输入!');
return;
}
// 创建一个表格元素
let table = ('table');
// 遍历行
for (let i = 0; i < numRows; i++) {
// 创建新行
let row = ('tr');
// 遍历列
for (let j = 0; j < numCols; j++) {
// 计算乘积
let product = i * j;
// 创建新单元格
let cell = ('td');
= product;
// 添加事件监听器以突出显示鼠标悬停的单元格
('mouseover', function() {
= 'yellow';
});
('mouseout', function() {
= '';
});
// 将单元格添加到行
(cell);
}
// 将行添加到表格
(row);
}
// 将表格添加到页面
(table);
```
此代码段会提示用户输入乘法表的行数和列数。它验证输入,然后使用类似于上述代码的嵌套循环生成表格。它还添加了事件监听器,当鼠标悬停在单元格上时,它会突出显示该单元格。

2025-01-16


上一篇:JavaScript 语言精粹:一本必读的参考指南

下一篇:JavaScript 输出语句