当前位置：首页 > JavaScript

js实现乘法表

2026-01-30 12:06:10JavaScript

使用 JavaScript 打印乘法表

以下是几种常见的实现方式，可以根据需求选择适合的方法。

使用双重循环打印标准乘法表

for (let i = 1; i <= 9; i++) {
  let row = '';
  for (let j = 1; j <= i; j++) {
    row += `${j} × ${i} = ${i * j}\t`;
  }
  console.log(row);
}

生成 HTML 格式的乘法表

function generateMultiplicationTable() {
  let table = '<table border="1">';
  for (let i = 1; i <= 9; i++) {
    table += '<tr>';
    for (let j = 1; j <= i; j++) {
      table += `<td>${j}×${i}=${i*j}</td>`;
    }
    table += '</tr>';
  }
  table += '</table>';
  document.body.innerHTML = table;
}
generateMultiplicationTable();

使用数组和 map 方法生成乘法表

const table = Array.from({length: 9}, (_, i) => 
  Array.from({length: i + 1}, (_, j) => 
    `${j + 1} × ${i + 1} = ${(i + 1) * (j + 1)}`
  ).join('\t')
).join('\n');

console.log(table);

递归方式实现乘法表

function printMultiplicationTable(row = 1, col = 1) {
  if (row > 9) return;

  if (col <= row) {
    process.stdout.write(`${col}×${row}=${row*col}\t`);
    printMultiplicationTable(row, col + 1);
  } else {
    console.log();
    printMultiplicationTable(row + 1, 1);
  }
}
printMultiplicationTable();

在网页中显示格式化的乘法表

function displayFormattedTable() {
  const container = document.createElement('div');
  container.style.fontFamily = 'monospace';

  for (let i = 1; i <= 9; i++) {
    const row = document.createElement('div');
    for (let j = 1; j <= i; j++) {
      row.textContent += `${j}×${i}=${(i*j).toString().padStart(2)}\t`;
    }
    container.appendChild(row);
  }

  document.body.appendChild(container);
}
displayFormattedTable();

这些实现方式各有特点，可以根据具体的使用场景选择最适合的方法。第一种是最基础的双重循环实现，第二种适合网页显示，第三种展示了函数式编程风格，第四种演示了递归思路，第五种提供了更好的格式化输出效果。

js实现乘法表