如何用JavaScript实现一个九九乘法表

最新推荐文章于 2023-07-20 21:11:15 发布

heedjay

最新推荐文章于 2023-07-20 21:11:15 发布

阅读量1.7w

点赞数 9

CC 4.0 BY-SA版权

分类专栏： JavaScript-demo

本文链接：https://blog.youkuaiyun.com/qq_42687264/article/details/81139811

JavaScript-demo 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript动态生成九九乘法表的方法，并详细解释了其背后的编程逻辑和技术要点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先了解清楚我们最终实现的效果

最终实现的HTML代码

<div id="wrap">
        <span>1x1=1</span><br>
        <span>2x1=2</span><span>2x2=4</span><br>
        <span>3x1=3</span><span>3x2=6</span><span>3x3=9</span><br>
        <span>4x1=4</span><span>4x2=8</span><span>4x3=12</span><span>4x4=16</span><br>
        <span>5x1=5</span><span>5x2=10</span><span>5x3=15</span><span>5x4=20</span><span>5x5=25</span><br>
        <span>6x1=6</span><span>6x2=12</span><span>6x3=18</span><span>6x4=24</span><span>6x5=30</span><span>6x6=36</span><br>
        <span>7x1=7</span><span>7x2=14</span><span>7x3=21</span><span>7x4=28</span><span>7x5=35</span><span>7x6=42</span><span>7x7=49</span><br>
        <span>8x1=8</span><span>8x2=16</span><span>8x3=24</span><span>8x4=32</span><span>8x5=40</span><span>8x6=48</span><span>8x7=56</span><span>8x8=64</span><br>
        <span>9x1=9</span><span>9x2=18</span><span>9x3=27</span><span>9x4=36</span>   <span>9x5=45</span><span>9x6=54</span><span>9x7=63</span><span>9x8=72</span><span>9x9=81</span><br>
</div>

html布局部分

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding: 0;}
		span{
			display: inline-block;
			width: 60px;
			height: 16px;
			line-height: 16px;
			padding: 2px;
			margin: 5px;
			border: 1px solid red;
			text-align: center;
		}
	</style>
</head>
<body>
	<div id="wrap"></div>
</body>
</html>

JavaScript代码和思路部分

	<script>
		window.onload = function (){
			//获取在乘法表输出的盒子 
			var wrap = document.getElementById("wrap");
			//声明一个空的str 用于后期保存乘法表的内容
			var str = "";
			//for循环计算输出 核心部分 
			//外层循环 1-9 所以 i等于1 而且i必须小于等于9 
			//如果只小于9 就只会循环到8 
			for (var i = 1; i <= 9; i++) {
				var count = i;//为了方便区别外内层循环 声明一个变量等于i
				//内层循环主要根据i的大小来决定循环的次数 内层j的初始值为1
				//也就是说 外层i为1 j也只有一个值 1 所以内层执行一次
				// 当i为2的时候 j就会有两个值 1 2 内层执行两次 
				//最后我们利用这样的规律我们就能输出九九乘法表
				for (var j = 1; j <= count ; j++) {
					console.log(j + "x" + count + "=" + j*count);

				}
			}
			wrap.innerHTML = str;
		}
	</script>

后台输出结果中，我们发现已经成功输出所有的公式

最后我们把所有输出的内容叠加到str里面。注意的是，我们在什么位置加<br>换行标签

	<script>
		window.onload = function (){
			var wrap = document.getElementById("wrap");
			var str = "";
			for (var i = 1; i <= 9; i++) {
				var count = i;//为了方便区别外内层循环 声明一个变量等于i
				for (var j = 1; j <= count ; j++) {
					//三元运算符判断 j 是否等于 count 当结果为true 的时候 执行带换行标签的公式 如果不是 执行不带换行符的公式
					//因为 j 等于 count 的时候 是内循环最后一次运行 也就是 4*4 8*8的时候
					j == count ? str += "<span>" + j + "x" + count + "=" + j*count + "</span><br>":
					str += "<span>" + j + "x" + count + "=" + j*count + "</span>";
				}
			}
			//最后把str 输出到 wrap的盒子里面
			wrap.innerHTML = str;
		}
	</script>

最后实现的效果

这里是最总的小demo页面代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding: 0;}
		span{
			display: inline-block;
			width: 60px;
			height: 16px;
			line-height: 16px;
			padding: 2px;
			margin: 5px;
			border: 1px solid red;
			text-align: center;
		}
	</style>
</head>
<body>
	<div id="wrap"></div>
	<script>
		window.onload = function (){
			var wrap = document.getElementById("wrap");
			var str = "";
			for (var i = 1; i <= 9; i++) {
				var count = i;
				for (var j = 1; j <= count ; j++) {
					j == count ? str += "<span>" + j + "x" + count + "=" + j*count + "</span><br>":
					str += "<span>" + j + "x" + count + "=" + j*count + "</span>";
				}
			}
			wrap.innerHTML = str;
		}
	</script>
</body>
</html>