几行代码就能轻松学会

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>九九乘法表</title>
</head>
<style>
	div{
		width: 80px;
		display: inline-block;
		font-size: 18px;
		background-color: lawngreen;
	}
	table td{
		width: 80px;
	}
</style>
<body>
	<script>
        for(var i=1;i<=9;i++){
			for(var j=1;j<=i;j++){
			    document.write('<div>'+i+'*'+j+'='+i*j+'</div>');
			}
			document.write('<br />');
		}
	</script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>九九乘法表</title>
</head>
<style>
	div{
		width: 80px;
		display: inline-block;
		font-size: 18px;
		background-color: lawngreen;
	}
	table td{
		width: 80px;
	}
</style>
<body>
	<script>
        for(var i=9;i>0;i--){
			for(var j=1;j<=i;j++){
				document.write('<div>'+i+'*'+j+'='+i*j+'</div>');
			}
			document.write('<br />');
		}	

	</script>
</body>
</html>

 

 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>九九乘法表</title>
</head>
<style>
	div{
		width: 80px;
		display: inline-block;
		font-size: 18px;

	}
	table td{
		width: 80px;
	}
</style>
<body>
	<script>
        document.write("<table>");   
		for (var x = 9; x>=1; x--){  
		    document.write("<tr>"); 
			//这层是循环输出空格子的
			for(var i=1;i<10-x;i++){
				 document.write("<th></th>");  
			}	
			//再倒过来输出
			for (var y = x; y>=1; y--){  
	        	document.write("<td>"+y+"*"+x+"="+y*x+"</td>");   
		    }  
		}  
		document.write("</table>");
	</script>
</body>
</html>

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>九九乘法表</title>
</head>
<style>
	div{
		width: 80px;
		display: inline-block;
		font-size: 18px;
	}
	table td{
		width: 80px;
	}
</style>
<body>
	<script>
        document.write("<table>");   
		for (var x = 1; x<=9; x++){  
		    document.write("<tr>"); 
			//这层是循环输出空格子的
			for(var i=1;i<10-x;i++){
				 document.write("<th></th>");  
			}	
			//再倒过来输出
			for (var y = x; y>=1; y--){  
	        	document.write("<td>"+y+"*"+x+"="+y*x+"</td>");   
		    }  
		}  
		document.write("</table>");
	</script>
</body>
</html>

喜欢我的文章就关注我吧，持续更新中.....

以上内容希望帮助到大家，很多朋友r在进阶的时候总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道该从那里入手去提升，对此我整理了一些资料，多个知识点高级进阶干货需要的可以免费分享给大家，需要的可以去主页或者评论联系。

更多推荐

JavaScript实现九九乘法表四种方法（附代码）