99乘法表

JavaScript写出99乘法表

<!DOCTYPE html>
<html lang="ch-zn">
<head>
    <meta charset="UTF-8">
    <title>moban</title>

    <style>
    html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
    header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
    table{border-collapse:collapse;border-spacing:0;}
    caption,th{text-align:left;font-weight:normal;}
    html,body,fieldset,img,iframe,abbr{border:0;}
    i,cite,em,var,address,dfn{font-style:normal;}
    [hidefocus],summary{outline:0;}
    li{list-style:none;}
    h1,h2,h3,h4,h5,h6,small{font-size:100%;}
    sup,sub{font-size:83%;}

    #wrap{
      font-size: 0;
    }
    #wrap span{
      display: inline-block;

      width: 70px;
      height: 35px;
      border: 1px solid blue;
      margin: 2px;

      font-size: 12px;
      line-height: 35px;
      text-align: center;
    }


    </style>

</head>
<body>

    <div id="wrap">



    <script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
    <script>
        //获取页面标签节点权限
        let oWrap = document.getElementById("wrap"),
        //定义变量初始值
            h = "";
        //第一种for循环排列
        for(let i=0; i<9; i++){

            for(let j=0; j<i+1; j++ ){
                //span标签拼接
                h += "<span>"+(i+1)+"*"+(j+1)+"="+(i+1)*(j+1)+"</span>";

            }
            //每行标签加换行符
            h += "<br>";
        }
        //添加分隔符
        h += "<hr>"

        //第二种for循环
        for(let i=0; i<9; i++){

            for(let j=0; j<9-i; j++){
                //span标签的拼接
                h += `<span>${9-i}*${j+1}=${(9-i)*(j+1)}</span>`;
            }
            //每行标签加换行符
            h += "<br>"
        }
        //每行标签加换行符
        h +="<hr>"
        //将拼接的标签值赋值给节点owrap
        oWrap.innerHTML  = h ;

    </script>
</body>
<!--
笔记区域




-->

</html>

posted @ 2021-01-06 03:09  小衣  阅读(177)  评论(0)  编辑  收藏  举报