js打印99乘法表

最新推荐文章于 2022-02-19 15:22:02 发布

I am the sun?

最新推荐文章于 2022-02-19 15:22:02 发布

阅读量635

点赞数 1

分类专栏： js 文章标签： js javascript

本文链接：https://blog.csdn.net/fighting_dream/article/details/113778604

版权

js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

代码：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script type="text/javascript">
		for(var i = 1;i <= 9;i++){
			for(var j = 1;j <= i;j++){
				var sum = j * i;
				document.write(j + "*" + i + "=" + sum);
			}
			document.write("<br />");
		}
	</script>
</head>
<body>
	
</body>
</html>

运行结果如下：
在这里插入图片描述
于是，我想到了每一个式子之间给它加上空格，代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script type="text/javascript">
		for(var i = 1;i <= 9;i++){
			for(var j = 1;j <= i;j++){
				var sum = j * i;
				document.write(j + "*" + i + "=" + sum + "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;");
			}
			document.write("<br />");
		}
	</script>
</head>
<body>
	
</body>
</html>

运行结果如下：
在这里插入图片描述
因此，css它就出现了。我们给每个式子加上宽度。但是又得在一行显示。而块级元素是不能加宽度的，因此我要将块级元素转为行内块元素。代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script type="text/javascript">
		for(var i = 1;i <= 9;i++){
			for(var j = 1;j <= i;j++){
				var sum = j * i;
				document.write("<span>" + j + "*" + i + "=" + sum + "</span>");
			}
			document.write("<br />");
		}
	</script>
	<style type="text/css">
		span {
			width: 80px;
			display: inline-block;
		}
	</style>
</head>
<body>
	
</body>
</html>

运行结果如下：
在这里插入图片描述
基本上能交作业了，但是，我浏览器一缩小它就会跑了，如下图：

还能完善吗？当然可以。我们给body设置上宽度就好啦：
代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script type="text/javascript">
		for(var i = 1;i <= 9;i++){
			for(var j = 1;j <= i;j++){
				var sum = j * i;
				document.write("<span>" + j + "*" + i + "=" + sum + "</span>");
			}
			document.write("<br />");
		}
	</script>
	<style type="text/css">
		span {
			width: 80px;
			display: inline-block;
		}
		body {
			width: 3000px;
		}
	</style>
		
</head>
<body>
	
</body>
</html>

运行结果如下：
在这里插入图片描述
现在跑不了啦~~·