用js代码怎么写99乘法表

用JavaScript代码生成99乘法表

生成99乘法表是一个经典的编程练习，它可以帮助初学者熟悉循环结构和嵌套循环的使用。在JavaScript中，我们可以使用嵌套的for循环来生成乘法表。下面是一个简单而有效的示例：

function generateMultiplicationTable() {

    let table = '';
    for (let i = 1; i <= 9; i++) {
        for (let j = 1; j <= 9; j++) {
            table += `${i} * ${j} = ${i * j}t`;
        }
        table += 'n';
    }
    return table;
}
console.log(generateMultiplicationTable());

解释

• 利用嵌套循环生成乘法表：我们使用两个for循环，第一个循环从1到9，表示乘数；第二个循环也是从1到9，表示被乘数。
• 构建表格字符串：在每一次内层循环中，我们将每一个乘法表达式和结果拼接到一个字符串table中，并在每一行的末尾添加换行符n。
• 输出结果：最后，我们调用generateMultiplicationTable函数，并将结果输出到控制台。

一、使用HTML和JavaScript生成乘法表

如果我们希望在网页上显示99乘法表，可以结合HTML和JavaScript来实现。以下是一个简单的示例：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>99 Multiplication Table</title>
    <style>
        table { 
            width: 100%; 
            border-collapse: collapse; 
        }
        td { 
            border: 1px solid #000; 
            padding: 8px; 
            text-align: center; 
        }
    </style>
</head>
<body>
    <h1>99 Multiplication Table</h1>
    <div id="multiplication-table"></div>
    <script>
        function generateMultiplicationTableHTML() {
            let tableHTML = '<table>';
            for (let i = 1; i <= 9; i++) {
                tableHTML += '<tr>';
                for (let j = 1; j <= 9; j++) {
                    tableHTML += `<td>${i} * ${j} = ${i * j}</td>`;
                }
                tableHTML += '</tr>';
            }
            tableHTML += '</table>';
            return tableHTML;
        }
        document.getElementById('multiplication-table').innerHTML = generateMultiplicationTableHTML();
    </script>
</body>
</html>

解释

• HTML结构：我们创建了一个简单的HTML页面，包含一个div元素，用于放置生成的乘法表。
• CSS样式：我们添加了一些基本的CSS样式，使表格更具可读性。
• JavaScript生成表格：使用JavaScript生成HTML表格字符串，并将其插入到div元素中。

二、优化代码和提高可读性

为了提高代码的可读性和可维护性，我们可以将生成表格的JavaScript代码进行拆分和优化。

function createMultiplicationTable() {

    const table = document.createElement('table');
    for (let i = 1; i <= 9; i++) {
        const row = document.createElement('tr');
        for (let j = 1; j <= 9; j++) {
            const cell = document.createElement('td');
            cell.textContent = `${i} * ${j} = ${i * j}`;
            row.appendChild(cell);
        }
        table.appendChild(row);
    }
    return table;
}
document.addEventListener('DOMContentLoaded', () => {
    const tableContainer = document.getElementById('multiplication-table');
    tableContainer.appendChild(createMultiplicationTable());
});

解释

• 创建DOM元素：使用document.createElement方法创建表格及其子元素（行和单元格）。
• 添加文本内容：使用textContent属性为每个单元格添加乘法表达式及其结果。
• DOM加载完成后插入表格：使用DOMContentLoaded事件确保DOM加载完成后再将生成的表格插入到页面中。

三、响应式布局和优化显示效果

我们可以进一步优化乘法表的显示效果，使其在不同屏幕尺寸下都能很好地展示。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive 99 Multiplication Table</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        table { 
            border-collapse: collapse; 
            width: 90%; 
            max-width: 600px;
            margin: 20px auto;
        }
        td { 
            border: 1px solid #000; 
            padding: 8px; 
            text-align: center; 
            font-size: 14px;
        }
        @media (max-width: 600px) {
            td {
                font-size: 10px;
            }
        }
    </style>
</head>
<body>
    <div id="multiplication-table"></div>
    <script>
        function createMultiplicationTable() {
            const table = document.createElement('table');
            for (let i = 1; i <= 9; i++) {
                const row = document.createElement('tr');
                for (let j = 1; j <= 9; j++) {
                    const cell = document.createElement('td');
                    cell.textContent = `${i} * ${j} = ${i * j}`;
                    row.appendChild(cell);
                }
                table.appendChild(row);
            }
            return table;
        }
        document.addEventListener('DOMContentLoaded', () => {
            const tableContainer = document.getElementById('multiplication-table');
            tableContainer.appendChild(createMultiplicationTable());
        });
    </script>
</body>
</html>

解释

• 响应式设计：通过CSS媒体查询调整单元格字体大小，使表格在小屏幕设备上仍然具有良好的可读性。
• 居中显示：使用Flexbox布局使表格在页面上居中显示。

四、总结

生成99乘法表是一个简单但非常有用的编程练习。通过这个练习，我们可以熟悉JavaScript中的循环结构、DOM操作以及基本的HTML和CSS布局技术。优化代码的可读性和显示效果，使其在不同设备上都能良好展示，是提升用户体验的重要步骤。使用现代的项目管理和协作工具，如研发项目管理系统PingCode和通用项目协作软件Worktile，可以帮助团队更高效地进行项目开发和管理。

相关问答FAQs：

1. 如何使用JavaScript编写九九乘法表？

JavaScript可以通过使用嵌套循环来编写九九乘法表。以下是一个示例代码：

for (let i = 1; i <= 9; i++) {
  for (let j = 1; j <= i; j++) {
    document.write(i + " × " + j + " = " + (i * j) + "<br>");
  }
  document.write("<br>");
}

2. 如何在网页上显示九九乘法表？

要在网页上显示九九乘法表，可以使用JavaScript将结果写入HTML文档中的一个元素。以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>九九乘法表</title>
</head>
<body>
  <div id="multiplicationTable"></div>

  <script>
    let table = "";
    for (let i = 1; i <= 9; i++) {
      for (let j = 1; j <= i; j++) {
        table += i + " × " + j + " = " + (i * j) + "<br>";
      }
      table += "<br>";
    }

    document.getElementById("multiplicationTable").innerHTML = table;
  </script>
</body>
</html>

3. 如何使用JavaScript生成九九乘法表的数组？

你可以使用JavaScript生成一个包含九九乘法表所有结果的数组。以下是一个示例代码：

let multiplicationTable = [];
for (let i = 1; i <= 9; i++) {
  multiplicationTable[i] = [];
  for (let j = 1; j <= i; j++) {
    multiplicationTable[i][j] = i * j;
  }
}

console.log(multiplicationTable);

这将生成一个二维数组，其中每个元素对应于九九乘法表中的一个结果。你可以根据需要使用该数组进行进一步的操作和显示。