当前位置:首页 > JavaScript

js实现乘法表

2026-03-01 03:14:13JavaScript

JavaScript 实现乘法表

使用 JavaScript 实现乘法表可以通过多种方式完成,以下是几种常见的实现方法。

使用嵌套循环打印乘法表

通过嵌套的 for 循环可以生成一个标准的乘法表,并将结果输出到控制台或页面。

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 页面中动态生成乘法表

如果需要在网页上显示乘法表,可以通过 DOM 操作动态生成表格。

const table = document.createElement('table');
document.body.appendChild(table);

for (let i = 1; i <= 9; i++) {
  const row = document.createElement('tr');
  for (let j = 1; j <= i; j++) {
    const cell = document.createElement('td');
    cell.textContent = `${j} × ${i} = ${i * j}`;
    row.appendChild(cell);
  }
  table.appendChild(row);
}

使用字符串拼接生成乘法表

如果不需要复杂的格式,可以直接拼接字符串并输出。

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

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

利用数组的 map 方法可以更函数式地生成乘法表。

js实现乘法表

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

console.log(table);

以上方法均能实现乘法表的功能,具体选择取决于使用场景和需求。

标签: 乘法表js
分享给朋友:

相关文章

js实现图片预览

js实现图片预览

使用FileReader API实现图片预览 通过FileReader对象读取用户选择的图片文件并显示预览: const input = document.getElementById('image…

js实现vue路由

js实现vue路由

Vue 路由的基本实现 在 Vue.js 中实现路由功能通常使用 Vue Router 库。Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。 安装 Vue R…

js实现吸色

js实现吸色

使用Canvas实现吸色功能 通过Canvas的getImageData方法获取像素颜色数据。创建一个Canvas元素,将目标图像绘制到Canvas上,通过鼠标事件获取坐标对应的颜色值。 c…

js实现截图

js实现截图

使用HTML2Canvas库实现截图 HTML2Canvas是一个流行的JavaScript库,可以将网页元素或整个页面转换为Canvas图像。安装方式: npm install html2canv…

js 实现进度条

js 实现进度条

使用 HTML 和 CSS 创建基础结构 进度条需要一个容器和一个填充元素。HTML 结构可以简单如下: <div class="progress-container"> <d…

js实现音乐播放

js实现音乐播放

使用HTML5 Audio API实现音乐播放 在JavaScript中,可以通过HTML5的Audio API轻松实现音乐播放功能。以下是基本实现方法: // 创建Audio对象 const au…