首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

工作日日历-通过JS将3个DIV动态添加到一起-尝试将最终的DIV刷新到右侧

工作日日历是一种通过JavaScript动态生成的日历,用于显示工作日的布局和排列。要将3个DIV动态添加到一起,可以使用JavaScript的DOM操作。

首先,我们可以创建一个父容器DIV,用于包裹这3个要添加的DIV。然后通过JavaScript创建这3个DIV,并将它们添加到父容器DIV中。具体实现代码如下:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
    <title>工作日日历</title>
    <style>
        .container {
            display: flex;
        }
        .day {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <div class="container"></div>

    <script>
        // 创建父容器DIV
        var container = document.querySelector('.container');

        // 创建3个DIV,并添加到父容器DIV中
        for (var i = 0; i < 3; i++) {
            var div = document.createElement('div');
            div.className = 'day';
            div.innerText = 'Day ' + (i + 1);
            container.appendChild(div);
        }
    </script>
</body>
</html>

上述代码会将3个DIV添加到名为"container"的父容器DIV中,并在每个DIV内显示"Day 1"、"Day 2"和"Day 3"。

接下来,我们尝试将最终的DIV刷新到右侧。可以通过设置CSS样式来实现将DIV刷新到右侧的效果。具体实现代码如下:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
    <title>工作日日历</title>
    <style>
        .container {
            display: flex;
            justify-content: flex-end; /* 将内容向右对齐 */
        }
        .day {
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin-left: 10px; /* 调整左右边距 */
        }
    </style>
</head>
<body>
    <div class="container"></div>

    <script>
        // 创建父容器DIV
        var container = document.querySelector('.container');

        // 创建3个DIV,并添加到父容器DIV中
        for (var i = 0; i < 3; i++) {
            var div = document.createElement('div');
            div.className = 'day';
            div.innerText = 'Day ' + (i + 1);
            container.appendChild(div);
        }
    </script>
</body>
</html>

上述代码中,通过设置父容器DIV的justify-content属性为flex-end,实现了将DIV刷新到右侧的效果。同时,通过调整左右边距,可以进一步调整DIV之间的间距。

请注意,以上代码中没有提及具体的腾讯云相关产品和产品介绍链接地址,如需了解腾讯云相关的解决方案和产品,可以访问腾讯云官网进行查询。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券