九九乘法表（br换行/position定位实现）

最新推荐文章于 2023-02-09 09:38:52 发布

Jyann~

最新推荐文章于 2023-02-09 09:38:52 发布

阅读量938

点赞数

分类专栏： JS高级案例文章标签：九九乘法表br方式实现九九乘法表position方式实现

本文链接：https://blog.csdn.net/qq_34569497/article/details/94719949

版权

JS高级案例专栏收录该内容

20 篇文章 1 订阅

订阅专栏

方法一：<br>标签实现，br换行方式需要设置div样式：display: inline-block;因为div默认会换行显示

注意：innerHTML方法不要子在for循环中循环使用，可以使用变量str接收所有需要生成的HTML内容，再在for循环外一次调用innerHTML。innerHTML属于DOM操作，调用太多次会出现性能问题。

<!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>九九乘法表-br换行方式</title>
    <style>
        body,ul,li,div { margin: 0; padding: 0; }
        img { vertical-align: top; border: none; }
        ul,li { list-style: none; }

        .bg { width: 1600px; height: 1067px; background: url('img/99tab_bg.jpg') no-repeat; margin: 0 auto; }
        .tab99 { width:1156px; height: 436px; background: #e8e5fc; position: relative; top: 436px; left: 250px; padding: 30px 0 0 30px; border-radius: 12px; }
        .tab99 div { width: 120px; height: 40px; line-height: 40px; background: #78cc64; color: white; text-align: center; border-radius: 4px; margin: 0 2px 2px 0; display: inline-block; }
    </style>
</head>
<body>
      <div class="bg">
        <div class="tab99">
          <!-- <div>1 * 1 = 1</div><br><div>1 * 2 = 2</div><div>1 * 2 = 2</div><div>1 * 2 = 2</div> -->
        </div>
      </div>  
      <script>
        //br换行方式需要设置div样式：display: inline-block;
        var colors = ['#78cc64','#58cd7e','#4fcdad','#4cc7dd','#469ee8','#465de8','#5846e8','#8346e8','#9e46e8'];
        var tab99 = document.querySelector(".tab99");
        var divStr = '';
        for(var i=1;i<10;i++){
          for(var j=1;j<=i;j++){
            var txt = j + " * " + i + " = " + i*j;
            divStr += '<div style="background:'+ colors[i-1] +'">'+ txt +'</div>';
          }
          divStr += '<br>';
        }
        tab99.innerHTML = divStr;
      </script>
</body>
</html>

方法二：position方式需要设置div样式：父级相对，自己position绝对定位top,left

注意：根据多个div在行和列的具体位置进行设置left和top的对应值（需要同时考虑width+margin）

<!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>九九乘法表-position定位方式</title>
    <style>
        body,ul,li,div { margin: 0; padding: 0; }
        img { vertical-align: top; border: none; }
        ul,li { list-style: none; }

        .bg { width: 1600px; height: 1067px; background: url('img/99tab_bg.jpg') no-repeat; margin: 0 auto; }
        .tab99 { width:1156px; height: 436px; background: #e8e5fc; top: 436px; left: 250px; padding: 30px 0 0 30px; border-radius: 12px; position: relative; }
        .tab99 div { width: 120px; height: 40px; line-height: 40px; background: #78cc64; color: white; text-align: center; border-radius: 4px; margin: 0 2px 2px 0; position: absolute; }
    </style>
</head>
<body>
      <div class="bg">
        <div class="tab99"></div>
      </div>  
      <script>
        //position方式需要设置div样式：position定位top,left
        var tab99 = document.querySelector(".tab99");
        var divStr = '';
        for(var i=1;i<10;i++){
          for(var j=1;j<=i;j++){
            var txt = j + " * " + i + " = " + i*j;
            //因为i,j初始化为1，但是定位是从0，0开始，所以需要使用i-1和j-1。本身需要上下margin 30所以需要再+30
            var topStr = (i-1)*42 + 30;
            var leftStr = (j-1)*122 + 30;
            divStr += '<div style="top:'+ topStr +'px;left:'+ leftStr +'px;">'+ txt +'</div>';
          }
        }
        tab99.innerHTML = divStr;
      </script>
</body>
</html>

结果：

Jyann~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
九九乘法表（br换行/position定位实现）

方法一：<br>标签实现，br换行方式需要设置div样式：display: inline-block;因为div默认会换行显示注意：innerHTML方法不要子在for循环中循环使用，可以使用变量str接收所有需要生成的HTML内容，再在for循环外一次调用innerHTML。innerHTML属于DOM操作，调用太多次会出现性能问题。<!DOCTYPE html&gt...
复制链接

扫一扫