HTML九九乘法表的灵活应用
九九乘法表是一个每个人都会的算法表,在生活中我们也会经常的用到这个算法表,所以今天就写了下在HTML里面怎么生成九九乘法表和怎么灵活应用,显示时生成不同的效果。一、默认生成效果图如下:HTML页面的代码如下:九九乘法表table{width:600px;border-collapse:collapse;}table
·
九九乘法表是一个每个人都会的算法表,在生活中我们也会经常的用到这个算法表,所以今天就写了下在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>
更多推荐
已为社区贡献1条内容
所有评论(0)