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

用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>

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