JavaScript前端实现九九乘法表

JavaScript前端实现九九乘法表

1.通过点击网页上的按钮调用f1()函数来显示;

	<html>
	<head>
	</head>
	<body>
		<div id="d1"></div>
		<input type="button" value="生成九九乘法表" onclick="f1()"/>
	</body>
	</html>

2.编写script里面的内容:

	<script>
	function f1(){
		var str="";
		for(var i = 1;i <= 9;i++){//外层循环
			str += "<div id='d2'>";//内层循环完后执行换行
			for(j = 1;j <= i;j++){//内层循环
				str += "<div>";
				str += i+"X"+j+"="+i*j;
				str += "</div>";
			}
			str += "<br/></div><br/>";//实现换行
		}
		document.getElementById("d1").innerHTML=str;
	}
	</script>

3.最后编写css样式:

	<style>
		#d2 div{width: 50px;height: 30px;border: 1px solid black;float:left;text-align: center;line-height: 30px;};
	</style>

那么到这里整个代码编写完成;
所有源码:

<html>
<head>
	<style>
		#d2 div{width: 50px;height: 30px;border: 1px solid black;float:left;text-align: center;line-height: 30px;};
	</style>
	<script>
	function f1(){
		var str="";
		for(var i = 1;i <= 9;i++){//外层循环
			str += "<div id='d2'>";//内层循环完后执行换行
			for(j = 1;j <= i;j++){//内层循环
				str += "<div>";
				str += i+"X"+j+"="+i*j;
				str += "</div>";
			}
			str += "<br/></div><br/>";
		}
		document.getElementById("d1").innerHTML=str;
	}
	</script>
</head>
<body>
<div id="d1">
</div>
<input type="button" onclick="f1()" value="生成乘法表" />
</body>
</html>

最后运行结果:
在浏览器中运行结果如上图所示。

PS:新手一枚;有什么问题还请大佬多多批评指正。

阅读更多

没有更多推荐了,返回首页