JavaScript之生成九九乘法表，带样式

最新推荐文章于 2023-08-07 11:39:48 发布

原创最新推荐文章于 2023-08-07 11:39:48 发布 · 888 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#js

该博客展示了一个使用HTML、CSS和JavaScript实现的99乘法表动态生成示例。通过JavaScript函数f1()，实现了外层循环控制行数，内层循环控制列数，动态创建并填充乘法表的HTML结构。页面中有一个按钮，点击后会生成并显示乘法表。CSS部分设置了表格的布局和样式，使其居中显示，背景色鲜明。

h5部分

JS部分

CSS部分

页面效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.table{
				/* 设置flex布局 */
				display: flex;
				justify-content: center;
				align-self: center;
				background: #FAE53E;
				padding-top: 30px;
				color: #FFFFFF;
				position: relative;
			}
			#d1{
				height: 400px;
			}
			#d2 div{
				float:left;
				width: 100px;
				height: 30px;
				background-color: #2F82FE;
				border: 1px solid #FAE53E;
				text-align: center;
				line-height: 30px;
			}
			.btn{
				/* 固定按钮在页面的位置 */
				position: absolute;
				top: 460px;
				width: 200px;
				height: 50px;
				border: none;
				border-radius: 50px;
				color: #FFFFFF;
				font-weight: 400;
				background: #2F82FE;
			}
		</style>
		<script>
			function f1(){
				var str = "";
				// 外层循环控制行数
				for(var i=1;i<=9;i++){
					// 内嵌一层div盒子d2
					str += "<div id ='d2'>";
					// str = str + "<div id='d2>";
					// 内层循环，控制每一行的个数即列数，j<=i
					for(var j=1;j<=i;j++){
						// 在d2下再内嵌一层包含式子单元格
						str += "<div>";
						str += j+"x"+i+"="+i*j;
						str += "</div>";
					}
					// 实现每个乘法式子单元格换行，并且与d2开头的div完全闭合
					str += "<br/></div></br>";
				}
				// innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容；
				// 这里为对象插入内容str
				document.getElementById("d1").innerHTML = str;
			}
		</script>
	</head>
	<body>
		<div class="table">
			<div id="d1"></div>
			<!-- 写一个提交按钮，添加onclick点击事件 -->
			<input class="btn" type="button" value="for生成99乘法表" onclick="f1()">
		</div>
	</body>
</html>