JavaScript实现四种界面的九九乘法表

来源：互联网发布：知乎lol dota 编辑：程序博客网时间：2024/05/17 02:12

实现效果如下所示：

1：

2：

3：

4：

实现代码如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript">function Mult_01(){document.write("<div class='div1' style='width:800px;height:500px;border: 1px solid green;text-align:left;margin: 0 auto; '>");document.write("<hr>");for(var i=1;i<=9;i++){  for(var j=1;j<=i;j++){document.write(j+"*"+i+"="+i*j+"    \t");}        document.writeln("<br>");}document.write("</div>");}function Mult_02(){document.write("<div class='div1' style='width:800px;height:500px;border: 1px solid green;text-align:left;margin: 0 auto; '>");document.write("<hr>");for(var i=9;i>=1;i--){  for(var j=1;j<=i;j++){document.write(j+"*"+i+"="+i*j+"    \t");}        document.writeln("<br>");}document.write("</div>");}function Mult_03(){document.write("<div class='div1' style='width:800px;height:500px;border: 1px solid green;text-align:right;margin: 0 auto; '>");document.write("<hr>");for(var i=1;i<=9;i++){  for(var k=i;k<=9-i;k++)  {  document.write("        \t");  }  for(var j=i;j>=1;j--){document.write(i+"*"+j+"="+i*j+"    \t");}        document.writeln("<br>");}document.write("</div>");}function Mult_04(){document.write("<div class='div1' style='width:800px;height:500px;border: 1px solid green;text-align:right;margin: 0 auto; '>");document.write("<hr>");for(var i=9;i>=1;i--){  for(var j=i;j>=1;j--){document.write(j+"*"+i+"="+i*j+"    ");}      for(var k=9-i;k>=1;k--)  {  document.write("\t");       }        document.writeln("<br>");}document.write("</div>");}实现代码如下所示：</script><style type="text/css">    div{        text-align:center;        margin: 0 auto;       }</style></head><body><div class="div1"></div><div><button onclick="Mult_01();">表一</button><button onclick="Mult_02();">表二</button><button onclick="Mult_03();">表三</button><button onclick="Mult_04();">表四</button></div></body></html>

代码中使用了四个按钮，对应四个javaScript中方法，进行实现四种形态的显示

1 0