原生js生成99乘法表（美化版）

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

不会写代码的垃圾

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

阅读量2.8k

点赞数 1

本文链接：https://blog.csdn.net/blog635/article/details/81484575

版权

JavaScript/jquery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

今天使用js制作99乘法表，强迫症的我只能这么做……

以下是效果图，哎呀妈，变形了，凑活看吧~~~~

下面就来看看我这49行代码咋写的吧

强迫症的人，真是苦逼

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>九九乘法表</title>
		<style>
			p {
				width: 100px;
				text-align: left;
				display: inline-block;
				padding: 10px;
				margin: 0px;
				font-size: 18px;
				background-color: aquamarine;
				border-top: 1px solid #000000;
				border-right: 1px solid #000000;
			}
			
			div {
				display: block;
			}
			
			#zheng99 {
				width: auto;
				display: inline-block !important;
				display: inline;
				border-left: 1px solid #000000;
				border-bottom: 1px solid #000000;
			}
		</style>
	</head>

	<body>
		<h1>9*9乘法表</h1>
		<div id="zheng99"></div>
	</body>
	<script>
		window.onload = function() {
			for(var i = 1; i <= 9; i++) {
				divs = document.getElementById("zheng99").innerHTML += "<div></div>";
				for(var j = 1; j <= i; j++) {
					document.getElementById("zheng99").getElementsByTagName("div")[i - 1].innerHTML += "<p>" + j + " x " + i + " = " + (j * i) + "</p>";
				}
			}
		}
	</script>

</html>

不会写代码的垃圾

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
2
评论
原生js生成99乘法表（美化版）

今天使用js制作99乘法表，强迫症的我只能这么做……以下是效果图，哎呀妈，变形了，凑活看吧~~~~下面就来看看我这49行代码咋写的吧强迫症的人，真是苦逼<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>九九乘法表<...
复制链接

扫一扫