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

最新推荐文章于 2023-06-06 09:55:08 发布

AMuMuion

最新推荐文章于 2023-06-06 09:55:08 发布

阅读量782

点赞数

文章标签： js

本文链接：https://blog.csdn.net/AMuMuion/article/details/112298976

版权

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>

AMuMuion

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
JavaScript之生成九九乘法表，带样式

h5部分JS部分CSS部分页面效果：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> *{ padding: 0; margin: 0; } .table{ /* 设置flex布局 */ display: flex;
复制链接

扫一扫