一个菜鸟的互联网技术分享博客
您的位置: 主页 > js实现九九乘法口诀
advertisement

js实现九九乘法口诀

再看面试题的时候看到了一道乘法口诀的题目,然后就打开编辑器写了几行代码,代码如下所示:
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <title>九九乘法表</title>  
  6.     </head>  
  7.     <style>  
  8.         html,  
  9.         body,  
  10.         ul,  
  11.         li {  
  12.             padding: 0;  
  13.             margin: 0;  
  14.             border: 0;  
  15.         }  
  16.   
  17.         ul {  
  18.             width: 900px;  
  19.             overflow: hidden;  
  20.             margin-top: 4px;  
  21.             font-size: 12px;  
  22.             line-height: 36px;  
  23.         }  
  24.   
  25.         li {  
  26.             float: left;  
  27.             width: 90px;  
  28.             margin: 0 4px;  
  29.             display: inline-block;  
  30.             text-align: center;  
  31.             border: 1px solid #333;  
  32.             background: yellowgreen;  
  33.         }  
  34.     </style>  
  35.     <body>  
  36.   
  37.     </body>  
  38.     <script>  
  39.         for (var i = 1; i <= 9; i++) {  
  40.             var myUl = document.createElement('ul');  
  41.             for (var j = 1; j <= i; j++) {  
  42.                 var myLi = document.createElement('li');  
  43.                 var myText = document.createTextNode(j + " × " + i + " = " + i * j);  
  44.                 myLi.appendChild(myText);  
  45.                 myUl.appendChild(myLi);  
  46.             }  
  47.             document.getElementsByTagName('body')[0].appendChild(myUl);  
  48.         }  
  49.     </script>  
  50. </html> 
当然你也可以访问这个链接去查看实现后的样子
zhangren.online
上一篇:es5继承和es6中class的用法对比
下一篇:没有了

您可能喜欢

​canvas的drawImage无法显示图像

​canvas的drawImage无法显示图像

​解决一个页面多个enter事件的混乱

​解决一个页面多个enter事件的混乱

​js获取一个对象的长度

​js获取一个对象的长度

回到顶部