当前位置:首页 > JavaScript

js实现乘法表

2026-01-30 12:06:10JavaScript

使用 JavaScript 打印乘法表

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

js实现乘法表

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

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
分享给朋友:

相关文章

js 实现vue模板

js 实现vue模板

实现 Vue 模板的 JavaScript 方法 通过原生 JavaScript 可以实现类似 Vue 的模板渲染功能,主要包括数据绑定、指令处理和模板解析。以下是核心实现思路: 数据绑定与…

js实现图片上传

js实现图片上传

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API可以实现图片上传功能。HTML部分需要创建一个文件选择输入框和一个用于…

js 实现分页

js 实现分页

实现分页的基本逻辑 分页功能通常需要后端返回数据总量或总页数,前端根据当前页码和每页条数截取对应数据。以下是一个基于JavaScript的简单分页实现方案: 前端分页实现 假设已有从后端获取的完整数…

js实现图表

js实现图表

在JavaScript中实现图表通常使用流行的图表库,以下是几种常见的方法和工具: 使用Chart.js Chart.js是一个简单灵活的库,适合快速生成响应式图表。安装方式包括CDN引入或npm安…

js实现游标

js实现游标

使用JavaScript实现游标 在JavaScript中,可以通过操作DOM元素的cursor样式属性来实现自定义游标效果。以下是几种常见的实现方法: 修改默认鼠标指针样式 通过CSS的curso…

js手势实现

js手势实现

手势识别实现方法 在JavaScript中实现手势识别通常涉及监听触摸事件(touchstart、touchmove、touchend)或鼠标事件(mousedown、mousemove、mouseu…