当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 用js写九九乘法表格，附带背景颜色

用js写九九乘法表格，附带背景颜色

2019年12月21日  | 移动技术网IT编程  | 我要评论
<!doctype html>
<html lang="en">
<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>document</title>
    <!-- css样式 -->
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table {
            width: 800px;
            height: 350px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
        }

        table,
        td {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
</body>

<script>
    // 原始版
    // document.write("<table>");
    // var j = 1;
    // while (j <= 9) {
    //     document.write("<tr>");
    //     var i = 1;
    //     while (i <= j) {
    //         document.write("<td>" + i + "*" + j + "=" + (i*j) + "</td>");
    //         i++;
    //     }
    //     document.write("</tr>");
    //     j++;
    // }
    // document.write("</table>");
 
　//-　-　-分割线- - - -

    // 附带奇偶数换色版
    document.write("<table>");

    for (var h = 1; h <= 9; h++) {  //循环行数
        // 奇偶数行换色
        if (h % 2 == 1) {
            document.write("<tr style='background:pink;'>");
        } else {
            document.write("<tr style='background:#6ff;'>");

        }

        for (var g = 1; g <= h; g++) {  //循环列数，且列要小于等于行数

            // 隔列变色
            if (g % 2 == 1) {
                document.write("<td style='background:pink;'>" + g + "*" + h + "=" + g * h + "</td>");
            } else {
                document.write("<td style='background:#6ff;'>" + g + "*" + h + "=" + g * h + "</td>");
            }
        }
        document.write("</tr>");
    }

    document.write("<table>");
</script>

</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网