用JavaScript和HTML写一个东西

艺小卤 · 发表于 2025-4-4 15:06:47

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>九九乘法表</title>
</head>
<body>
<h2>九九乘法表</h2>
<script language="JavaScript">
function generateMultiplicationTable() {
document.write("<table border='1' cellspacing='0'>");
for (let i = 1; i <= 9; i++) {
document.write("<tr>");
for (let j = 1; j <= i; j++) {
document.write("<td>" + j + " * " + i + " = " + (j * i) + "</td>");
}
document.write("</tr>");
}
document.write("</table>");
}
generateMultiplicationTable();
</script>
</body>
</html>

复制代码

FishC · 发表于 2025-4-4 15:07:32

<!DOCTYPE html>
<html>
<head>
<title>九九乘法表</title>
<style>
table { border-collapse: collapse; margin: 20px; }
td {
padding: 10px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<div id="tableContainer"></div>
<script>
function createMultiplicationTable() {
let html = '<table>';
for (let i = 1; i <= 9; i++) {
html += '<tr>';
for (let j = 1; j <= i; j++) {
html += `<td>${j}×${i}=${i*j}</td>`;
}
html += '</tr>';
}
html += '</table>';
document.getElementById('tableContainer').innerHTML = html;
}
// 页面加载完成后自动生成
window.onload = createMultiplicationTable;
</script>
</body>
</html>

复制代码

效果说明：
1. 使用嵌套循环生成表格结构
2. 外层循环控制行数（1-9）
3. 内层循环控制每行的列数（第n行有n列）
4. 使用模板字符串拼接HTML
5. 通过CSS添加边框和间距
6. 自动在页面加载完成后执行

显示效果为阶梯式排列：
1×1=1
1×2=2 2×2=4
1×3=3 2×3=6 3×3=9
...
直到第9行

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册

[技术交流] 用JavaScript和HTML写一个东西

马上注册，结交更多好友，享用更多功能^_^