当前位置:首页 > 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
分享给朋友:

相关文章

vue.js实现轮播

vue.js实现轮播

Vue.js 实现轮播功能 使用第三方库(推荐) Vue.js 生态中有许多成熟的轮播组件库,例如 vue-awesome-swiper 或 swiper,它们功能丰富且易于集成。 安装 swipe…

js实现跳转

js实现跳转

使用 window.location 跳转 通过修改 window.location.href 实现页面跳转,这是最常用的方法。 window.location.href = 'https://…

js实现日历

js实现日历

实现日历的基本思路 使用JavaScript实现日历的核心是动态生成日期表格,并处理月份切换逻辑。需要计算当前月的天数、起始星期几,并动态渲染到页面上。 获取当前日期信息 通过Date对象获取当前年…

js实现驼峰

js实现驼峰

实现驼峰命名的几种方法 使用正则表达式和字符串替换 通过正则表达式匹配字符串中的特定模式(如下划线或短横线),并将其后的字母转换为大写,同时移除分隔符。 function toCamelCase(s…

js实现密码

js实现密码

密码强度验证 使用正则表达式验证密码强度是一种常见方法。以下代码检查密码是否包含大小写字母、数字和特殊字符,且长度至少为8位: function checkPasswordStrength(pass…

js实现 功能

js实现 功能

在 JavaScript 中实现功能通常涉及多个关键步骤,具体取决于功能需求。以下是常见功能的实现方法和示例: 基本功能实现 使用函数封装逻辑是最直接的方式。例如,实现一个计算两数之和的函数: f…