原生javascript + vue组成的日历

本项目是一款日历,提供了展开看整月、收拢看整周功能;上月下月翻页功能;点击具体日期响应事件以及点击灰色日期,字段跳转到上月、下月功能。

主要思路是从两侧计算完日期后,加上本月中间这一块日期,拼接而成。

例如:

   整月数据:

          1.首先获取本月总共多少天,第一天和最后一天是星期几。最终获得本月数据

                     2.拿到刚才计算的本月第一天星期几,用['日','一','二','三','四','五','六']这个序列定位上月还缺几天需要填入,计算出上月总共多少天,循环得出上月需要填满的数据

                    3.拿到刚才计算的本月最后一天星期几,步骤如图二,得出下月需要填满的数据。

                    4.最后把上月数据、本月数据、下月数据合并起来,最终得到整月数据

            本周数据:

                    逻辑和整月数据一样的,优先定位本周的日期和星期,计算得出前面需要填满和后面需要填满的数据

最后,具体逻辑代码在:https://download.csdn.net/download/miss_ll/11189980,里面有我很多注释,全部由我原创,感谢支持,有更简便的方式可以和我交流,我会优化下~

现在在上面的基础上更新了一个带有农历的显示的版本:主要转农历的代码是网上找的大神的现成代码哈

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript是一种流行的编程语言,被广泛用于网页开发。Vue.js是一个基于JavaScript的前端开发框架,它提供了一套简洁、灵活的工具,使得开发者可以更轻松地构建交互式的Web应用程序。 Vue.js具有以下特点: 1. 渐进式:Vue.js采用渐进式的设计,可以逐步引入到现有的项目中,也可以通过逐步学习来适应各种开发需求。 2. 轻量级:Vue.js的核心库只有约21KB,加载速度快,非常适合于移动端开发。 3. 组件化:Vue.js支持组件化的开发方式,开发者可以根据需要构建复用性高、可维护性好的组件,提高开发效率。 4. 响应式:Vue.js采用了响应式的设计,当数据发生变化时,对应的页面会自动更新,大大减少了处理DOM操作的工作。 5. 单文件组件:Vue.js支持单文件组件的开发方式,将HTML、CSS、JS代码封装在同一个文件中,提高了代码的可读性和可维护性。 一个使用Vue.js的Web开发案例教程可能包含以下内容: 1. 环境搭建:介绍如何安装配置开发Vue.js的环境,如Node.js和Vue CLI。 2. 基础语法:引导学习者了解Vue.js的基本语法和常用指令,如数据绑定、事件处理、条件渲染等。 3. 组件开发:讲解如何使用Vue.js构建组件,如何进行组件通信、数据传递等。 4. 路由管理:介绍Vue Router,帮助学习者构建单页应用程序,实现页面之间的切换和导航。 5. 状态管理:介绍Vuex,帮助学习者管理应用程序的状态,实现数据的集中管理和共享。 6. 前后端交互:介绍如何使用Axios等工具,与后端服务器进行数据交互。 7. 实战项目:引导学习者完成一个完整的Vue.js项目,如博客系统、电子商务网站等。 通过这样的案例教程,学习者可以逐步了解和掌握Vue.js的开发思想和技术,提高自己的Web开发能力。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值