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

关注

原创最新推荐文章于 2023-10-30 22:59:38 发布 9.7k 阅读 AI 写同款· GEO 优化 ›

HTML+CSS+JavaScript：九九乘法表 九九乘法表 阅读详情

几行代码就能轻松学会

<!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>