用javascript写九九正反金字塔乘法表_js99乘法表倒过来怎么写-优快云博客

本文链接：https://blog.youkuaiyun.com/Bug_money/article/details/53024244

本文介绍了一种使用HTML和JavaScript生成九九乘法表金字塔的方法。通过原生JavaScript及jQuery实现了正三角形和倒三角形的乘法表，展示了不同实现方式。代码中包含了详细的注释帮助理解。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表金字塔</title>
    <script src="frameworks/jquery-2.1.4/jquery.js"></script>
    <script>
    /*
//1.正三角原生追加
    window.onload = function(){
        var box = document.getElementById("one");
        for(i = 1;i<=9;i++){
            for (j=1;j<=i;j++){
                var result = j+"*"+i+"="+(j*i);
                var newspan = document.createElement("span");
                newspan.innerHTML = result;
                box.appendChild(newspan);

            }
            var newbr = document.createElement("br");
            box.appendChild(newbr);
        }
    };
    */

//2.倒三角原生追加
   /*
   window.onload = function(){
    var box = document.getElementById("one");
         for(var i=9;i>0;i--){
            for(var j=1;j<=i;j++){
                var result = i+"*"+j+"="+(i*j);
                var newspan = document.createElement("span");
                newspan.innerHTML = result;
                box.appendChild(newspan);
             }
             var end = document.createElement("br");
             box.appendChild(end);
        }
   };
   */

//3.正三角使用jQuery记得导入jQuery框架
    /*
    $(function () {
         var $box = $(".box");
         for(var i = 1;i<=9;i++){
             for(var j = 1;j<=i;j++){
             var result = j+"*"+i+"="+(j*i);
             console.log(result);
             var newSpan = $("<span>"+result+"</span>");
             $box.append(newSpan);
             }
         var $end = $("<br />");
         $box.append($end);
         }
     });
     */

//4.用jQuery写倒三角(记得导库) 并追加
   $(function(){
    var $box = $(".box");
    for(var i=9;i>=1;i--){
        for(var j=1;j<=i;j++){
            var result = j+"*"+i+"="+(j*i);
            var newspan = $("<span>"+result+"</span>");
            $box.append(newspan);
        }
        var $end = $("<br />");
        $box.append($end);
    }
   });

    </script>

    <style>
        .box{text-align: center;}
        span{border: 1px solid #dddddd;}
    </style>

</head>
<body>
    <div id = "one" class="box"></div>
</body>
</html>