JavaScript实现九九乘法表

实现结果

JS代码

<script>
    /* 9X9遍历*/
    for (var i = 1; i < 10; i++) {
        /* 外围先创建9个盒子 */
        var oBox = document.createElement('div');
        /* 实现单排显示，行内块布局 */
        oBox.style.display = 'inline-block';
        /* 高度随内容递减，第一列不减少高度 */
        oBox.style.height = [300 - (i-1) * 32] + 'px';
        /* 设置相关样式 */
        oBox.style.width = '85px';
        oBox.style.border = '1px solid red';
        oBox.style.marginRight = '10px';
        /* 遍历  */
        for (var j = i; j < 10; j++) {
            /* 输出格式 a x b = c */
            var sum = i + 'X' + j + '=' + i * j + '';
            /* 创建个div修饰下 */
            var oDiv = document.createElement('div');
            oDiv.style.height = '20px';
            oDiv.style.width = '65px';
            oDiv.style.border = '1px solid #ccc';
            oDiv.style.margin = '10px';
            /* 添加到当前列中 */
            document.body.appendChild(oBox);
            oDiv.innerHTML = sum;
            oBox.appendChild(oDiv);
        }
    }
</script>

• 菜鸟进阶之路~~