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

梦里梦外; 2022-10-06 00:53 147阅读 0赞

几行代码就能轻松学会

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjEyM18wMA_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjEyM18wMA_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjEyM18wMA_size_16_color_FFFFFF_t_70 2][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjEyM18wMA_size_16_color_FFFFFF_t_70 3][]

<!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在进阶的时候总会遇到一些问题和瓶颈，业务代码写多了没有方向感，不知道该从那里入手去提升，对此我整理了一些资料，多个知识点高级进阶干货需要的可以免费分享给大家，需要的可以去主页或者评论联系。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjEyM18wMA_size_16_color_FFFFFF_t_70]: /images/20221005/1a46ae589f17403cb500125eb6607912.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjEyM18wMA_size_16_color_FFFFFF_t_70 1]: /images/20221005/361c663e635f44b4bd755e058a21543c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjEyM18wMA_size_16_color_FFFFFF_t_70 2]: /images/20221005/a4fb46457dad4c13887af44bd540195c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjEyM18wMA_size_16_color_FFFFFF_t_70 3]: /images/20221005/787e063bc57a4363b87005a9ee2ce695.png