zoukankan      html  css  js  c++  java
  • HTML + CSS + JavaScript 实现简单的 9 x 9 乘法表

    步骤:

    • 第一步:定义for循环,实现一个基本乘法表框架
      <script>
          for (let i = 0; i <= 9; i++) {
              for (let j = 0; j <= i ; j++) {
                  document.write(i + " * " + j + " = " + (i * j) + "&nbsp;&nbsp;&nbsp;");
              }
              document.write("<br>");
          }
      </script>

      效果如下:

    • 第二步:将没项结果放到一个表格对应的单元格中
      <script>
          /* 创建一个表格,乘法表中的每个元素都站一个单元格 */
          document.write("<table align='center'>");
          for (let i = 0; i <= 9; i++) {
              document.write("<tr>");
              for (let j = 0; j <= i ; j++) {
                  document.write("<td>");
                  document.write(i + " * " + j + " = " + (i * j) + "&nbsp;&nbsp;&nbsp;");
                  document.write("</td>");
              }
              document.write("</tr>");
          }
          document.write("</table>");
      </script>

      效果:

    • 第三步:利用CSS,对每个单元格进行描述
      <style>
          /* 对每个单元格进行描述:方框 + 方框线宽度为1px + 方框线为实线 */
          td {
              border: 1px solid;
          }
      </style>

      效果:

    HTML文件代码总和:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>九九乘法表</title>
        <!-- CSS -->
        <style>
            /* 对每个单元格进行描述:方框 + 方框线宽度为1px + 方框线为实线 */
            td {
                border: 1px solid;
            }
        </style>
    
        <!-- JavaScript -->
        <script>
            /* 创建一个表格,乘法表中的每个元素都站一个单元格 */
            document.write("<table align='center'>");
            for (let i = 0; i <= 9; i++) {
                document.write("<tr>");
                for (let j = 0; j <= i ; j++) {
                    document.write("<td>");
                    document.write(i + " * " + j + " = " + (i * j) + "&nbsp;&nbsp;&nbsp;");
                    document.write("</td>");
                }
                document.write("</tr>");
            }
            document.write("</table>");
        </script>
    
    </head>
    <body>
    
    </body>
    </html>

               

  • 相关阅读:
    观望Java-03:面向对象
    观望Java-02:基础语法
    观望Java-01:Java简介
    组件化开发——组件生命周期
    pug模板引擎——jade
    解决eclipse调试程序时source not found的问题
    Android中设置中文粗体的方法
    svn中编辑log message
    TortoiseSVN使用
    用TorToiseGit来管理github上的项目
  • 原文地址:https://www.cnblogs.com/liyihua/p/12374410.html
Copyright © 2011-2022 走看看