当前位置:首页 > JavaScript

js如何实现九九乘法表

2026-04-05 04:25:17JavaScript

实现九九乘法表的方法

使用双重循环

通过嵌套的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);
}

使用Array.mapArray.join

利用数组的map方法生成每一行的内容,再用join拼接字符串。

Array.from({ length: 9 }, (_, i) => i + 1).forEach(row => {
  const line = Array.from({ length: row }, (_, col) => {
    const colVal = col + 1;
    return `${colVal} × ${row} = ${colVal * row}`;
  }).join('\t');
  console.log(line);
});

使用模板字符串和repeat

通过模板字符串动态生成每一行的内容,结合repeat控制格式对齐。

for (let i = 1; i <= 9; i++) {
  let line = '';
  for (let j = 1; j <= i; j++) {
    line += `${j}×${i}=${i * j}`.padEnd(8, ' ');
  }
  console.log(line);
}

输出到HTML页面

将九九乘法表渲染到网页上,动态生成DOM元素。

const table = document.createElement('div');
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}  `;
  }
  table.appendChild(row);
}
document.body.appendChild(table);

使用递归实现

通过递归函数替代循环,逐行生成乘法表内容。

js如何实现九九乘法表

function printMultiplicationTable(row = 1, col = 1, line = '') {
  if (row > 9) return;
  if (col > row) {
    console.log(line);
    printMultiplicationTable(row + 1, 1, '');
  } else {
    line += `${col} × ${row} = ${col * row}\t`;
    printMultiplicationTable(row, col + 1, line);
  }
}
printMultiplicationTable();

注意事项

  • 制表符\tpadEnd用于对齐输出格式。
  • 根据需求选择控制台输出或页面渲染。
  • 递归实现需注意终止条件,避免栈溢出。

分享给朋友:

相关文章

h5如何实现vr效果

h5如何实现vr效果

使用WebXR API实现VR效果 WebXR是浏览器中实现VR/AR的核心API,支持设备姿态追踪、渲染交互等功能。需在支持WebXR的设备(如Oculus、HTC Vive)或浏览器模拟环境中运行…

java如何实现跨平台

java如何实现跨平台

Java实现跨平台的原理 Java通过“一次编写,到处运行”的设计理念实现跨平台能力。其核心机制包括: Java虚拟机(JVM) Java源代码编译为字节码(.class文件),由JVM解释执行。不…

vue如何实现拖拽

vue如何实现拖拽

实现拖拽的基本方法 在Vue中实现拖拽功能通常使用HTML5的Drag and Drop API或第三方库如vuedraggable。以下是两种方法的详细说明。 使用HTML5 Drag and D…

vue如何实现定位

vue如何实现定位

Vue 实现定位的方法 在 Vue 中实现定位通常涉及 CSS 的定位属性(如 position: fixed、position: absolute 等)或结合浏览器 API(如 Geolocatio…

vue 如何实现旋转

vue 如何实现旋转

Vue 实现旋转效果的方法 在Vue中实现旋转效果可以通过CSS动画、JavaScript或第三方库完成。以下是几种常见方法: 使用CSS动画 通过Vue绑定class或style实现CSS旋转动画…

vue搜索如何实现

vue搜索如何实现

Vue 搜索功能的实现方法 在 Vue 中实现搜索功能可以通过多种方式完成,具体取决于需求复杂度。以下是几种常见的实现方法: 使用计算属性实现简单搜索 计算属性非常适合实现简单的搜索功能,因为它会自…