> 웹 프론트엔드 > JS 튜토리얼 > 구구단 인쇄의 JS 구현 예

구구단 인쇄의 JS 구현 예

小云云
풀어 주다: 2018-03-13 15:48:08
원래의
3786명이 탐색했습니다.

本文主要和大家分享JS实现打印九九乘法表方法实例,希望能帮助到大家。

    步骤

    1.先循环,将整个乘法表拼了出来

    2.将乘法表套入一个table里

    3.简单的给table加点样式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS打印九九乘法表</title>
    <style media="screen">
      /* 简单给整个table加点样式 */
      table{
        border-collapse: collapse;
      }
      table tr{
        border: 1px solid #666;
      }
      table tr th{
        border: 1px solid #666;
        color: #999;
        padding:10px;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
    // 创建table
    document.write("<table>");
      // 打印九九乘法表
      for(var x = 1;x <= 9;x++){
        // 创建tr
        document.write("<tr>");
        for(var y = 1;y <= x;y++){
          // 公式里创建th
          document.write(&#39;<th>&#39; + x + &#39;*&#39; + y + &#39;=&#39; + (x * y) + &#39;</th>&#39;)
        }
        // 闭合tr
        document.write("</tr>");
      }
    // 闭合table
    document.write("</table>")
    </script>
  </body>
</html>
로그인 후 복사

相关推荐:

php使用双层循环实现九九乘法表的实例

js实现精美的九九乘法表效果代码

JS实现上下左右对称的九九乘法表_javascript技巧

위 내용은 구구단 인쇄의 JS 구현 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿