Skip to content

Instantly share code, notes, and snippets.

@jikeytang

jikeytang/[ Javascript ] - 20140708-题目1

Created July 7, 2014 23:24
Show Gist options
  • Save jikeytang/bc8a4f78d2491f2343bf to your computer and use it in GitHub Desktop.
Save jikeytang/bc8a4f78d2491f2343bf to your computer and use it in GitHub Desktop.
Download ZIP
[ Javascript ] - 20140708-题目1
Raw
[ Javascript ] - 20140708-题目1
用速度最优的代码输出一个带有细线表格的乘法口诀表。
PS:
1. 回复时注意加上下面这句话，才会有语法高亮或格式缩进。
```javascript
// you code
```
2. 粘贴代码时请使用shift+tab，缩进前面的空白。
@zjhsd2007
Copy link 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style>
        #result{ font-size: 0;font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;}
        #result span { display: inline-block;zoom:1; width:60px;height:25px; line-height: 25px; text-align: center; border: 1px solid #ddd; margin: -1px 0 0 -1px; font-size: 12px;}
    </style>
</head>
<body>
    <div id="result"></div>
    <script>
        var html = ''
        for(var i=1;i<=9;i++){
            for(var j=1;j<=i;j++){
                html += '<span>'+j+'*'+i+'='+(i*j)+'</span>';
            }
            html += '<br/>';
        }
        document.getElementById('result').innerHTML = html;
    </script>
</body>
</html>

@zhouwenhong
Copy link 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>九九乘法表</title>
  <style>
    .wrap {
      display: inline-block;
      border: 1px solid #0af;
      border-right: none;
      border-top: none;
    }
    .wrap span{
        display: inline-block;
        width: 50px;
        padding: 5px;
        border: 1px solid #0af;
        border-bottom: none;
        border-left: none;
    }
  </style>
</head>
<body>
  <div id="J-wrap" class="wrap"></div>
  <!-- JS 代码放这里 -->
</body>
</html>
<script>
//九九乘法表
(function(){
var i=1,
    j=1,
    str = '';

for(; i<=9; i++){
  str += '<div>';
  for(j=1; j<=i; j++){
      str += '<span>' + (j+'x'+i+'='+i*j) + '</span>';
  }
  str += '</div>';
}

document.getElementById('J-wrap').innerHTML = str;
})();  
</script>

@ljkfgh2008
Copy link 

//没有楼上2位的好 凑个热闹
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>jsTest</title>
   <style>table{border-collapse:collapse}</style>
</head>
<body>
    <table id="table1"  border="1"></table>
      <script>
        var data = new Array();
        for (var i = 1; i <= 9; i++) {
            data.push('<tr>');
            for (j = 1; j <= i; j++) {
                data.push('<td>' + i + 'X' + j + '=' + i * j + '</td>');
            }
            data.push('</tr>');
        }
        data.push('</tbody><table>');
        document.getElementById('table1').innerHTML = data.join('');
    </script>
</body>
</html>

@ysgcreate
Copy link 

<!DOCTYPE html>
<html>
<head>
    <title>Document</title>
    <meta charset='utf-8'>
    <style>
        #result span {
            border: solid 1px #eeeeee;
            margin: 2px;
            padding: 2px;
            line-height: 30px;
        }
    </style>
</head>
    <body>
        <div id="result"> </div>
        <script>
            var res=' ';
            for (var i=1;i<=9;i++) {
                for (var j=1;j<=i;j++) {
                    res += '<span>'+j+'*'+i+'='+(i*j)+'</span>';
                    if (i==4&&j==2) {
                        res+=' ';
                    }
                }
                res += '<br/>';
            }
            document.getElementById('result').innerHTML=res;
        </script>
    </body>
</html>

第4行第2列时对不齐，所以加了个空格

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment