JavaScript 基础之 九九乘法表

2018-12-24  本文已影响0人  limengzhe

首先打开我们的编译器,新建一个 html 文件

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript 九九乘法表</title>
  </head>
  <body></body>
</html>

然后在 html 里面写一对 script 标签,用 JSfor 循环,生成一个表格

<script type="text/javascript">
  document.write("<table>");
  for (let x = 1; x <= 9; x++) {
    document.write("<tr>");
    for (let y = 1; y <= x; y++) {
      document.write("<td>" + y + "×" + x + "=" + y * x + "</td>");
    }
    document.write("</tr>");
  }
  document.write("</table>");
</script>

最后简单的写一下样式就可以了

<style type="text/css">
  table {
    width: 720px;
  }
  table td {
    text-align: left;
  }
</style>

最终效果

九九乘法表

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript 九九乘法表</title>
    <script type="text/javascript">
      document.write("<table>");
      for (let x = 1; x <= 9; x++) {
        document.write("<tr>");
        for (let y = 1; y <= x; y++) {
          document.write("<td>" + y + "×" + x + "=" + y * x + "</td>");
        }
        document.write("</tr>");
      }
      document.write("</table>");
    </script>
    <style type="text/css">
      table {
        width: 720px;
      }
      table td {
        text-align: left;
      }
    </style>
  </head>
  <body></body>
</html>
上一篇 下一篇

猜你喜欢

热点阅读