HTML + CSS + JavaScript 实现简单的 9 x 9 乘法表

步骤：

第一步：定义for循环，实现一个基本乘法表框架

复制 <script>
    for (let i = 0; i <= 9; i++) {
        for (let j = 0; j <= i ; j++) {
            document.write(i + " * " + j + " = " + (i * j) + "&nbsp;&nbsp;&nbsp;");
        }
        document.write("<br>");
    }
</script>

效果如下：

第二步：将没项结果放到一个表格对应的单元格中

复制 <script>
    /* 创建一个表格，乘法表中的每个元素都站一个单元格 */
    document.write("<table align='center'>");
    for (let i = 0; i <= 9; i++) {
        document.write("<tr>");
        for (let j = 0; j <= i ; j++) {
            document.write("<td>");
            document.write(i + " * " + j + " = " + (i * j) + "&nbsp;&nbsp;&nbsp;");
            document.write("</td>");
        }
        document.write("</tr>");
    }
    document.write("</table>");
</script>

效果：

第三步：利用CSS，对每个单元格进行描述

复制 <style>
    /* 对每个单元格进行描述：方框 + 方框线宽度为1px + 方框线为实线 */
    td {
        border: 1px solid;
    }
</style>

效果：

HTML文件代码总和：

复制 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <!-- CSS -->
    <style>
        /* 对每个单元格进行描述：方框 + 方框线宽度为1px + 方框线为实线 */
        td {
            border: 1px solid;
        }
    </style>
 
    <!-- JavaScript -->
    <script>
        /* 创建一个表格，乘法表中的每个元素都站一个单元格 */
        document.write("<table align='center'>");
        for (let i = 0; i <= 9; i++) {
            document.write("<tr>");
            for (let j = 0; j <= i ; j++) {
                document.write("<td>");
                document.write(i + " * " + j + " = " + (i * j) + "&nbsp;&nbsp;&nbsp;");
                document.write("</td>");
            }
            document.write("</tr>");
        }
        document.write("</table>");
    </script>
 
</head>
<body>
 
</body>
</html>

posted @ 2020-02-27 21:08 LeeHua 阅读(3683) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· winform 绘制太阳，地球，月球运作规律
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾（3.3-3.9）

Lee Hua's Blog

热爱编程 -- 写Bug

HTML + CSS + JavaScript 实现简单的 9 x 9 乘法表

公告

我的标签

积分与排名

随笔分类 (240)

随笔档案 (226)

阅读排行榜

推荐排行榜

	<script>
	for (let i = 0; i <= 9; i++) {
	for (let j = 0; j <= i ; j++) {
	document.write(i + " * " + j + " = " + (i * j) + "   ");
	}
	document.write("<br>");
	}
	</script>

	<script>
	/* 创建一个表格，乘法表中的每个元素都站一个单元格 */
	document.write("<table align='center'>");
	for (let i = 0; i <= 9; i++) {
	document.write("<tr>");
	for (let j = 0; j <= i ; j++) {
	document.write("<td>");
	document.write(i + " * " + j + " = " + (i * j) + "   ");
	document.write("</td>");
	}
	document.write("</tr>");
	}
	document.write("</table>");
	</script>

	<style>
	/* 对每个单元格进行描述：方框 + 方框线宽度为1px + 方框线为实线 */
	td {
	border: 1px solid;
	}
	</style>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>九九乘法表</title>
	<!-- CSS -->
	<style>
	/* 对每个单元格进行描述：方框 + 方框线宽度为1px + 方框线为实线 */
	td {
	border: 1px solid;
	}
	</style>

	<!-- JavaScript -->
	<script>
	/* 创建一个表格，乘法表中的每个元素都站一个单元格 */
	document.write("<table align='center'>");
	for (let i = 0; i <= 9; i++) {
	document.write("<tr>");
	for (let j = 0; j <= i ; j++) {
	document.write("<td>");
	document.write(i + " * " + j + " = " + (i * j) + "   ");
	document.write("</td>");
	}
	document.write("</tr>");
	}
	document.write("</table>");
	</script>

	</head>
	<body>

	</body>
	</html>