用JavaScript实现九九乘法表

1.思路：

• 双层循环嵌套，外层循环控制层数，内层循环控制每一层的内容。
• 每一次进入新的一行，生成一个ul，在这个ul中不断生成新的li标签，并设置li标签的节点内容为i*j(写成公式的形式)。
• 通过css3的一些特殊]选择器来处理边框。
• 通过flex的justify-content属性来达到每一列ul的居中。

2.CSS代码

<style>            *{                margin: 0;                padding: 0;                box-sizing:border-box;            }            body{            }            ul{                display: flex;                justify-content:center;            }            li{                list-style: none;                width: 100px;                height: 40px;                text-align: center;                line-height: 40px;                border-top: 1px solid #ccc;                border-left: 1px solid #ccc;            }            li:nth-last-child(1){                border-right: 1px solid #ccc;            }            ul:nth-last-child(1) li{                border-bottom: 1px solid #ccc;            }            .clearfix:before,.clearfix:after{display:table;content:"";}            .clearfix:after{clear:both;}            .clearfix{*zoom:1} 

3.JavaScript代码

<script>        window.onload = function(){            for(var i = 1;i<10;i++){                var oUl = document.createElement('ul');                oUl.setAttribute('class','clearfix');                document.getElementsByTagName('body')[0].appendChild(oUl);                for(var j = 1;j<=i;j++){                    var oLi = document.createElement('li');                    var oText = document.createTextNode(i+'*'+j+'='+i*j);                    oLi.appendChild(oText);                    oUl.appendChild(oLi);                }            }        }        </script>

4.效果截图