用JavaScript和HTML写一个东西
<!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>
<!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 小助理,如未能正确解答您的问题,请继续追问。
页:
[1]