HTML九九乘法表的灵活应用

最新推荐文章于 2024-05-16 19:01:40 发布

fhx308050

最新推荐文章于 2024-05-16 19:01:40 发布

阅读量2.2w

点赞数 11

本文链接：https://blog.csdn.net/fhx308050/article/details/54845530

版权

九九乘法表是一个每个人都会的算法表，在生活中我们也会经常的用到这个算法表，所以今天就写了下在HTML里面怎么生成九九乘法表和怎么灵活应用，显示时生成不同的效果。

一、默认生成

效果图如下：

HTML页面的代码如下：

<html>
<head>
<title>九九乘法表</title>
<style type="text/css">  
table{  
    width:600px;  
    border-collapse:collapse;  
    }  
table th{  
    border:red 1px solid  ;
    }  
</style> 
</head>
<body align="center">  
<script type="text/javascript">  
//通过生成一个表格，在每个格子里面输出
document.write("<table>");   
//运用2层for循环来进行
for (var x = 1; x <= 9; x++)  
{  
    document.write("<tr>");  
    for (var y = 1; y <= x; y++)  
    {  
        document.write("<th>"+y+"*"+x+"="+y*x+"</th>");  
		 
    }  
}  
document.write("</table>");
</script>  
</body>
</html>

二、倒过来生成

效果图如下：

HTML页面的代码如下：

<html>
<head>
<title>九九乘法表</title>
<style type="text/css">  
table{  
    width:600px;  
    border-collapse:collapse;  
    }  
table td{  
    border:blue 1px solid ;
	font-weight:bold;
	text-align:center;
    }  
</style> 
</head>
<body align="center">  
<script type="text/javascript">  
//通过生成一个表格，在每个格子里面输出
document.write("<table>");   
//在第一层for循环里面进行2个for循环
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>

三、2种结合显示。

效果图如下：

HTML页面的代码如下：

<html>
<head>
<title>九九乘法表</title>
<style type="text/css">  
table{  
    width:600px;  
    border-collapse:collapse;  
    }  
table th{  
    border:red 1px solid  ;
    }  
table td{  
    border:blue 1px solid ;
	font-weight:bold;
	text-align:center;
    }  
</style> 
</head>
<body align="center">  
<script type="text/javascript">  
//通过生成一个表格，在每个格子里面输出
document.write("<table>");   
//在第一层for循环里面进行2个for循环
for (var x = 1; x <= 9; x++)  
{  
    document.write("<tr>");  
	//第1个for循环,默认显示
    for (var y = 1; y <= x; y++){  
        document.write("<th>"+y+"*"+x+"="+y*x+"</th>");   
    }  
	//第2个for循环倒过来
	 for (var i = x+1; i <=9; i++)  {
		document.write("<td>"+i+"*"+x+"="+i*x+"</td>");  
	}
    document.write("</tr>");  
}  
document.write("</table>");
</script>  
</body>
</html>

fhx308050

关注

11
点赞
踩
51

收藏

觉得还不错? 一键收藏
0
评论
HTML九九乘法表的灵活应用

九九乘法表是一个每个人都会的算法表，在生活中我们也会经常的用到这个算法表，所以今天就写了下在HTML里面怎么生成九九乘法表和怎么灵活应用，显示时生成不同的效果。一、默认生成效果图如下：HTML页面的代码如下：九九乘法表 table{ width:600px; border-collapse:collapse; } table
复制链接

扫一扫