JavaScript乘法表

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>JavaScript乘法表</title>
</head>

<body>

    <P>九九乘法表</P>

    <script>
        
        ElementTabuada();

        //有元素乘法表
        function ElementTabuada() {

            //声明变量储存算数结果
            var value = 0;
            //声明变量储存算式
            var arithmetic = "";

            //父级循环 
            for (var i = 0; i < 9; i++) {

                //子级循环
                for (var j = 0; j < 9; j++) {

                    //使循环变成阶梯表
                    if (j > i) {

                        //跳出子级循环
                        break;
                    }

                    //生成算式 : 1 * 1 = ??
                    arithmetic = (i + 1) + " * " + (j + 1) + " = ";

                    //生成算式结果 ?? * ?? = 算术结果
                    value = (i + 1) * (j + 1);

                    //使一位数具有两位数的空间
                    if (value < 10) {

                        //在算术结果前面添加空格
                        arithmetic += "\xa0\xa0";
                    }

                    //输出结果 : 1 * 1 = 1
                    arithmetic += value + "\xa0\xa0\xa0\xa0";

                    //声明常量 创建新的元素 在页面上创建span标签
                    const span = document.createElement("span");

                    //声明变量 创建文本节点 
                    var text = document.createTextNode(arithmetic);

                    //向span标签里面添加文本
                    span.appendChild(text);

                    //向body元素添加span元素
                    document.getElementsByTagName("body")[0].appendChild(span);

                    //创建颜色库
                    const qcode = new Array('00', '11', '22', '33', '44', '55', '66', '77', '88', '99', 'aa', 'bb',
                        'cc', 'dd', 'ee', 'ff');

                    const zcode = new Array('00', '11', '22', '33', '44', '55', '66', '77', '88', '99', 'aa', 'bb',
                        'cc', 'dd', 'ee', 'ff');

                    const hcode = new Array('00', '11', '22', '33', '44', '55', '66', '77', '88', '99', 'aa', 'bb',
                        'cc', 'dd', 'ee', 'ff');

                    //从颜色库选取一种颜色;当然这是数组的方式;随机性
                    var qycode = Math.floor(Math.random() * qcode.length);
                    var zycode = Math.floor(Math.random() * zcode.length);
                    var hycode = Math.floor(Math.random() * hcode.length);

                    //设置span元素样式
                    span.style.color = "#ffffff";//设置字体颜色
                    span.style.backgroundColor = "#" + qcode[qycode] + zcode[zycode] + hcode[hycode];//设置随机背景颜色
                    span.style.fontSize = 30 + "px";//设置字体大小
                    span.style.paddingLeft = 30 + "px";//设置做内边距

                }

                //每循环完子循环进行换行
                document.write("<br>");

            }



        }

    </script>


</body>

</html>
最后出现的结果：
相关推荐
