首页
学习
活动
专区
工具
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之间的间距。

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

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

相关·内容

「兔了个兔」玉兔踏青,纯CSS实现瑞兔日历(附源码)

今天给大家带来是一款可爱兔兔纯CSS日历,希望大家喜欢!让我们一起日历记录下今天日子! ---- 每日一言: 永远年轻,永远热泪盈眶!...  日历右侧瑞兔图片设计    HTML代码    CSS代码 完整源码 写在最后的话 ---- 前言 各位小伙伴们大家好呀!...今天给大家带来是一款可爱兔兔纯CSS日历,希望大家喜欢!让我们一起日历记录下今天日子!...---- 效果演示   下面为大家展示是瑞兔日历预览图: ---- 实现思路   看完效果图后,各位小伙伴们肯定很想知道实现思路,接下来我分步骤逐一进行讲解,如果想要获取源码小伙伴可以跳过该部分...我实现思路分成了如下四个部分,列举如下: 背景设计 日历框设计 日历左侧日期设计 日历右侧瑞兔图片设计   背景设计   通过使用HTML和CSS可以完成整个日历背景设置,背景颜色采取了橘橙色设计

43230
  • 心事我全知晓——心情日记小程序丨实战

    ------ 日历 这里日历使用了小程序插件,之所以在首页放一个日历是为了页面不显太单调。...下面讲解下插件是如何使用: 1、登录微信公众平台>设置>第三方设置>添加插件>搜索相关插件名字(使用appId搜索更好)>点击某个插件右侧查看详情,进入插件详情页添加插件,一般都能立马添加通过;...,好在已经通过了一次,媳妇能正常写点东西,也算基本符合要求,遗憾是后面实现点赞相关功能都没有更新到线上。...,由于点赞功能未更新到线上(原因是因为审核不通过),想体验同学可以留下评论,提供体验权限。...可以自己定义,存储到云中是这样: [t6ig60f34h.jpeg] 5、我们通过组件data中imgUrl临时存储手动上传图片路径,最终通过保存按钮一起存储到云数据库,存如到数据库是这样: [

    65981

    Wijmo 更优美的jQuery UI部件集:发现 Wijmo

    本指南介绍jQuery概念,然后让你开始你第一个Wijmo 项目。通过这种方式,你可以进一步深入我们演示库,更加强烈体会到Wijmo能为你带来什么。...85 }); 通过maxValue选项设置为85,wijprogressbar 部件取值范围变成从0到85,其minValue属性默认值为0。...如何引用Wijmo 你可以通过使用内容传送网络(CDN)轻松Wijmo加载到你web页面。CDN使得使用外部库以及部署到最终用户过程变得更加方便快捷。CDN是遍布世界各地计算机网络。...页面以了解最终标记语言效果。...如果你现在通过浏览器打开你工程,你发现一个功能完整日历部件,如下图所示: 但是如果该工程希望制定今天之前以及随后几个月日期不显示在日历上,应当如何做呢?显然删除它们不是一个明智选择。

    2.7K90

    618技术揭秘|探究竞速榜页面核心前端技术

    在页面中加载样式配置文件,可以通过接口请求加载用户选择皮肤,通过JavaScript动态设置样式属性和值,从而快速地修改页面的样式,实现页面主题皮肤更换。 图11....具体方案如下: 1、历史时间生成唯一标识时间戳SnapshotId,与历史数据一起存储下来。 2、当用户选择快照时间时,根据历史时间生成唯一标识时间戳SnapshotId,添加到页面URL中。...主要通过后台下发token和随机密钥算法,由前端特定信息通过算法生成签名,传递给后端进行识别,可有效识别/拦截券所产生业务损失,加强接口对抗性,提升防能力。...如果只是偶发性错误,那么用户在第一次或第二次尝试时可能会重新尝试,而不会立即放弃,从而减少了用户流失率。...,通过事件解析引擎解析用户自定义事件并完成事件绑定,完成解析赋值以及事件绑定后进行视图渲染,最终将目 本文介绍了京东竞速榜H5页面的核心前端技术,这些技术可以帮助开发者更好地开发H5页面,提高网站质量和用户满意度

    17920

    使用 React-DnD 打造简易低代码平台

    低代码即无需代码或只需要通过少量代码,通过“拖拽”方式即可快速生成应用程序。那么对于开发者而言,我们应该如何入手开发呢?...是通过 HTML5 Drag and Drop API 下面是简单实现代码 function dragstart_handler(ev) { // A目标元素 id 添加到数据传输对象...end collect 用于获得拖动状态状态,可以设置样式 低代码实现 回到我们低代码主题,我们来一起看下钉钉宜搭页面设计 主要分为3个区域:左侧组件区、中间设计区、右侧编辑区。...右侧区域也可以配置不同组件,比如 Text 就渲染成最简单 Input。...希望这篇文章对大家有所帮助,也可以参考我往期文章或者在评论区交流你想法和心得,欢迎一起探索前端。

    6K20

    如何掌握高级React设计模式: 复合组件【译】

    因此,让我们尝试不同方法来重写组件,使其具有灵活性和可重用性,以应变将来任何配置。...目前,我们明确地 Progress 和 Steps 组件直接放在 Stepper 组件中。 为了减少这种静态写法,我们可以使用 props 对象动态插入子组件。 ?...style={styles.container}> {children} ); 现在我们可以 Progress 和 Stage 作为子项添加到 Stepper 组件中,运行效果不变...style={styles.progressContainer}> {children} ) } } 完成上述步骤后,我们可以在任意位置动态添加任意数量...); } } export default Steps; 通过在 Stepper 组件上添加相应静态方法,我们可以按照我们想要顺序添加任意数量Step组件。

    1.4K10

    11款神器帮助程序员摆脱Deadline驱动

    并且可以与团队中其他成员一起使用,通过团队界面来了解每个人都做了些什么。应用中可以生成详细报告来描述每个项目中花费时间和获取报酬。...在单个时间段中,用户可以多个受邀者添加到会议,网络会议或研讨会中。虽然Calendly是一个功能非常强大应用,但它用户界面十分简洁并且容易操作。 Google Calendar 使用:免费 ?...应用中可以为不同种类任务创建多个日历。因此,可以有一个工作日历,一个家庭日历,一个度假日历,一个爱好日历,等等等等。而用户登录时候,所有的任务都会显示在主界面上。...不过可以通过点击左侧“我日历”选项卡来查看单个日历。同事也可以将他们日历共享给你。在“其他日历”下输入一个人姓名或是电子邮件地址,就可以将其日历添加到自己列表中。...长按二维码关注京程一灯,阅读更多技术文章和业界动态

    2.2K30

    用Vue.js开发一个电影App前端界面

    这篇文章重点介绍如何通过使用vue.js 2 建立一个类似风格电影流媒体WEB交互界面(见上图)。...尽管Bulma将作为应用CSS框架,但是本文主要集中在Vue.js使用和浏览CSS式样,如果你想跟着学,我设置了一个可以作为开始学习地方,所有自定义组合,初始数据对象和必要需要通过CDN引用外部库...一个电影预告片屏幕,在电影播放时显示电影预告片。 可以电影添加到收藏夹中 我们创建应用程序,让页脚随时出现,而首页、电影和电影预告片共享相同屏幕。...我们现在能够通过读取$route.params.id获得不同动态段内组件。 现在我们已经为电影组件设置了路由,让我们快速草拟组件并确保我们路由正常工作。...这是我我们一起打破瓶颈和进一步了解vue.js概念共同一种锻炼,所以我希望这是有益,你学到东西了吗? 如果你有任何问题/意见/意见,我会很高兴听到

    4K10

    如何掌握高级React设计模式: 复合组件【译】

    因此,让我们尝试不同方法来重写组件,使其具有灵活性和可重用性,以应变将来任何配置。...目前,我们明确地 Progress 和 Steps 组件直接放在 Stepper 组件中。 为了减少这种静态写法,我们可以使用 props 对象动态插入子组件。...在 Stepper.js 文件中使用 props.children 对象替换 Progress 和 Steps 组件,并将它们放在 App.js Stepper 组件内。...style={styles.container}>    {children}   ); 现在我们可以 Progress 和 Stage 作为子项添加到 Stepper 组件中,运行效果不变...style={styles.progressContainer}>        {children}          )  } } 完成上述步骤后,我们可以在任意位置动态添加任意数量

    84610

    Vue初步认识与Vue基础指令

    传统开发缺点: 1.DOM操作频繁,代码繁杂 2.DOM操作与逻辑代码混合,可维护性差 3.不同功能区域书写在一起,可维护性低 4.模块之间依赖关系复杂 Vue.js应运而生 官网: https...://cn.vuejs.org Vue.js核心特性 数据驱动视图 数据变化会自动更新到对应元素中,无需手动操作 DOM,这种行为称作单向数据绑定。...也支持变量方式 插值表达式 挂载元素可以使用 Vue.js 模板语法,模板中可以通过插值表达式为元素进行动态内容设置,写法为 {{ }} 注意点: 插值表达式只能书写在标签内容区域,不可以和其他内容混合在一起...> 结果 v-show 指令 用于控制元素显示与隐藏,适用于显示隐藏频繁切换时候使用 v-show内部数据也可以通过data设置达到控制效果 也可以通过条件表达式来控制...:v-if和v-for分开,比如v-if放在父元素上 <li v-for="item in items

    3.1K30

    从 B 站秋季主题中学习 “图层组合动画”(万字长文)

    原理分析 我们先进行实现原理分析,打开控制台,可以发现这个效果是通过几个图层变换位置和高斯模糊来实现(如下图) ? image 除此之外,还有个小女孩 眨眼 特效,是通过切换图片来实现。...所以我们实现步骤分解为四步: 获取对应图片; 图片按照效果图,摆放在对应位置,设置默认高斯模糊; 通过切换图片制作 眨眼 特效; 根据鼠标位置切换图片位置和高斯模糊; 那我们遵循上面的步骤,开始制作吧...image 如上图所示,我们可以得到几张不同状态图片,我们下载到自己电脑里即可。 摆放图片 我们下载几张图片都是 png 格式,我们可以使用定位将其堆叠到一起。...image 制作眨眼特效 我们静态页面已经制作差不多了,接下来我们来用 JS 简单实现 眨眼 特效吧。...image 如上图所示,我们 眨眼 特效已经可以做到以假乱真啦! 动态交互 最后,我们来为我们图层合集添加上交互效果吧!

    80250

    从零开始使用 Astro 实用指南

    准备好享受一些动手乐趣,因为我们一起创建一个小型网站实例。我们构建一个多页面的网站,包括一个博客。...相反,你可以考虑其他工具比如Next.js。 很好,现在我们对Astro是什么以及它能做什么有了很好了解。接下来,让我们继续研究,看看我们能一起构造些什么。...最后,我将把我们logo和一些语义标记,与一个容器一起添加到我们header中,这样我稍后可以添加一些样式: <a class...现在你可以以任何方式这些属性添加到模板中。 另外,注意插槽元素。这是内容出现在最终HTML页面上地方。 还有一步。...你可以通过在你终端运行以下命令来做到这一点: npm run build 项目的最终构建将被默认存储在dist文件夹中。所以,你需要做就是把你dist目录上传到你服务器。

    88740

    如何使用Vue.js和Axios来显示API中数据

    第1步 - 创建一个基本VUE应用程序 我们来创建一个基本Vue应用程序。 我们构建一个带有一些模拟数据HTML页面,我们最终将用来自API实时数据替换它们。...> 我们最终将使用API​​中实时数据替换此硬编码值。...当你在浏览器中重新加载时,你会看到嘲弄价格: 通过此修改,我们可以新货币添加到vueApp.jsresults数据中,并将其显示在页面上,而无需进一步更改。...另一个模拟条目添加到数据集中以尝试以下操作: vueApp.js const vm = new Vue({ el: '#app', data: {...您学习了如何在页面上显示数据,迭代结果以及静态数据替换为API结果。 既然您已经理解了基础知识,那么您可以将其他功能添加到应用程序中。

    8.8K20
    领券