用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.效果截图