当前位置：网站首页>js打印99乘法表

js打印99乘法表

2022-06-27 07:20:00 【I am the sun?】

代码：

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

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

原网站

版权声明
本文为[I am the sun?]所创，转载请带上原文链接，感谢
https://blog.csdn.net/fighting_dream/article/details/113778604

当前位置：网站首页>js打印99乘法表

js打印99乘法表

边栏推荐

猜你喜欢

随机推荐