用DOM写的九九乘法表

最新推荐文章于 2024-05-17 15:34:29 发布

I Believe in

最新推荐文章于 2024-05-17 15:34:29 发布

阅读量540

点赞数 1

本文链接：https://blog.csdn.net/lsy01/article/details/105350310

版权

用DOM写的九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>99乘法表</title>
    <style>
        body {
            background: linear-gradient(45deg,#feac5e,#c779d0,#4bc0c8) no-repeat;
        }
        table {
            width: 700px;
            height: 400px;
            margin-bottom: 10px;
            text-align: center;
            border-collapse: collapse;
        }
        tr, td {
            background-color:cornflowerblue;
            border: 1px solid black;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
//思路分析
/*
	先选中一个div的id为box的元素
	首先创建一个标签，用createElement方法
	利用for循环来控制生成的表格,外循环只循环一次,内循环就循环九次。然后再用append方法添加进到body中

*/
<script>
    var box = document.querySelector('.box');//选中box
    var table_one = document.createElement('table');//创建table标签
    for( var i = 1; i <= 9; i++ ) {
        var tr = document.createElement('tr');//创建tr标签
        for( var j = 1; j <= i; j++ ) {
            var td = document.createElement('td');//创建td标签
            td.innerText = j + '*' + i + '=' + i*j;//js中的数学运算与实际中的数学运算一致
            tr.append( td );//在tr中添加td
        };
        table_one.append( tr );//在table中添加tr
    };
    box.append(table_one);//在box中添加table

    var table_two = document.createElement('table');
    for( var a = 9; a > 0; a-- ) {
        var tr1 = document.createElement('tr');//创建tr
        for( var b = 1; b <= a; b++ ) {  
            var td1 = document.createElement('td');//创建td
            td1.innerText = a + '*' + b + '=' + a*b;
            tr1.append(td1);
        }
        table_two.append(tr1);
    };
    box.append(table_two);
</script>
</body>
</html>

I Believe in

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用DOM写的九九乘法表

用DOM写的九九乘法表<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&gt...
复制链接

扫一扫