JavaScript写的一个动态乘法口诀表（代码可自取）_动态乘法表代码怎么写出来-CSDN博客

本文链接：https://blog.csdn.net/weixin_58389873/article/details/120641458

这是一个JS小程序，可根据页面的输入框输入相应的数字来得到自己所需要的对应乘法口诀表，方便快捷，且写起来通俗易懂！

以下为代码的主要内容：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>乘法表</title>
	<style type="text/css">
		table {border-collapse:collapse;}
		tr,td
		{
			width:80px;
			height:20px;
			border:3px solid gray;
			background: #4DFFFF;
		}
	</style>

	<script type="text/javascript">
		function getTables()
		{
			var oTable,oTr,oTd,n,oTx;
			document.body.removeChild(document.body.lastElementChild);
		    oTable=document.createElement("table");
		    n=Number(document.getElementById("number").value);
		    for (var i=1;i<=n;i++)
		    {
		    	oTr=document.createElement("tr");
			    for (var j=1;j<=n;j++)
			    {
			    	oTd=document.createElement("td");
			    	oTx=document.createTextNode(i*j);
			    	oTd.appendChild(oTx);
			    	oTr.appendChild(oTd);
			    }
			    oTable.appendChild(oTr);
		    }
		    document.body.appendChild(oTable);
		}
	</script>
</head>
<body>
	<p>
		请输入一个数字，然后单击按钮进行计算并显示出相应的乘法表！
	</p>

	数字：<input type="text" id="number" /><br /><br />

	<input type="button" value="计算" onclick="getTables()" /><br />
</body>
</html>

页面所输出的表格的背景色可根据自己喜好随意修改，即：background:#4DFFFF

在页面上输出的乘法口诀表，无论你输入的数字是多少都能输出（数字越大，输出编译的时间就越长，请耐心的等待；反之）。

这是个人所做，仅供参考。如有喜欢可自行拷贝。