原生JS编写九九乘法表

最新推荐文章于 2022-08-02 20:22:23 发布

wujiancai1163

最新推荐文章于 2022-08-02 20:22:23 发布

阅读量280

点赞数 1

本文链接：https://blog.csdn.net/wujiancai1163/article/details/103934942

版权

<!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>九九乘法表</title>
    <style>
        li{
            height: 40px;
            line-height: 40px;
            /* border-bottom: 1px solid #ccc; */
        }
        li span{
            display: inline-block;
            width: 80px;
            height: 40px;
        }
    </style>
</head>
<body>
    <ul>
        <!-- <li>
            <span></span>
        </li> -->
    </ul>

    <script>
        // 获取元素
        var ul = document.getElementsByTagName("ul")[0];
        // 定义字符串
        var html = "";
        // 循环
        for(var i = 1 ; i <= 9 ; i++){
            // 字符串拼接
            html += "<li>"
            for(var j = 1 ; j <= i ; j++){
                var res = i*j
                html +="<span>"+j+"*"+i+"="+res+"</span>"
            }
            html += "</li>"
        }

        console.log(html)
        // 把字符串渲染在ul标签上
        ul.innerHTML = html;
    </script>
</body>
</html>

wujiancai1163

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生JS编写九九乘法表

<!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-...
复制链接

扫一扫