JavaScript--四个九九乘法表

最新推荐文章于 2024-10-12 10:41:56 发布

huayu_前端

最新推荐文章于 2024-10-12 10:41:56 发布

阅读量173

点赞数 1

分类专栏： JavaSctipt 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_72231179/article/details/140833384

版权

JavaSctipt 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

css：

  td {
        border: 1px solid;
    }

script：

 var str = "";
        str += "<table border='1'>";
        for (var i = 1; i <= 9; i++) {
            str += "<tr>";
            for (var a = 9; a >= i + 1; a--) {
                str += "<td></td>";
            }
            for (var j = 1; j <= i; j++) {
                str += "<td style='background-color: green;' >" + (10 - i) + "x" + (10 - j) + "=" + (10 - i) * (10 - j) + "</td>";
            }
            for (var j = 1; j <= i; j++) {
                str += "<td style='background-color: lightblue ;'>" + i + "x" + j + "=" + i * j + "</td>";
            }
            for (var a = 9; a >= i + 1; a--) {
                str += "<td></td>";
            }
            str += "</tr>";
        }
        for (var i = 9; i > 0; i--) {
            str += "<tr>";
            for (var a = 9; a >= i + 1; a--) {
                str += "<td></td>";
            }
            for (var j = 1; j <= i; j++) {
                str += "<td style='background-color: orange;' >" + (10 - i) + "x" + (10 - j) + "=" + (10 - i) * (10 - j) + "</td>";
            }
            for (var j = 1; j <= i; j++) {
                str += "<td style='background-color:pink;' >" + i + "x" + j + "=" + i * j + "</td>";
            }
            for (var a = 1; a >= i + 1; a--) {
                str += "<td></td>";
            }
            str += "</tr>";
        }
        str += "</table>";
        document.write(str);

效果图：