• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jQuery 联动日历实现代码

jQuery 联动日历实现代码

作者: 字体:[增加 减小] 来源:互联网 时间:2017-08-16

通过本文主要向大家介绍了jQuery,联动日历等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
来看下效果图

一、先来说下功能:

1.点击“确定”显示日历
2。再次点击隐藏,或从DOM中删除这个日历。如些反复第一,和第二这两步。
3.让日历中显示当前月份日期(多少天,每天是多少号)。
4.让当前月份的日期和星期几对应.
5.让左边两边的日历关联起来。

二、再来说下HTML结构。

1.上面蓝色的是一个DIV,显示当前月分,和上月,下月。
2.下面的日期和星期,是用一个table结构存放数据。星期用thead,日期用:tbody存放。

三、功能展开分析:

3.1、前两个功能?
  让我想起使用JQUERY里面的toggle。很方便就可以解决。

3.2、让日历中显示当前月份日期数?
  既然跟日期有关的,肯定会想起Deta这个对象了。在这个对象中,我们可以获取或设某年,某天,某月,某日,某星期几。但就是不能直接获取这一个月中有多少天。?怎么办呢?
  所以我们只能用判断了。根据当前月份的数值。来把天数存到一个变量当中。(对象获取到的当前月份要+1。国它是从零开始计算的).
  比如现在是五月,根据判断,五月是大,所以变量中就存31这个数值;即这个月有31天。

3.3、让当前月份的日期和星期几对应.??
  这个问题,解决办法就是,获取到当月一号,对应的星期几。后面的就可以依次排列下去了。这里的依次排列,我理解的是,因为存放日期的都是TD标签,在TBODY里面这些TD的索引,都是排列好的,所以把一号插入到那个TD当中,后面的二号,就会插入到后一个TD当中了。

3.4、让左边两边的日历关联起来。

  这里重点是“关联”:我最近写了“倒计时”,再就是这次的"联动日历",还有让我想起了“联动下拉菜单”,比如省份和市的联动下拉菜单;这些都涉汲到“联动”.
  我总结了一下,就是需要“联动”的东西,必定有一个“点”(先这么叫吧),其它需要变化,都要和这个点相关联起来,这样改变这个点,其它和这个点关联的东西,也就都会发生改变,也就实现了“联动”这一效果。

  比如,上次的“倒计时”,里面的“点”,就是当前时间和设定以后时间,之前相差的"总毫秒数"。倒计时显示的,时,分,秒,都和这个"总毫秒数"有关联,只要这个“总毫秒数”变化,那么时,分,秒,都会变化,这就是"联动"了.

  这次的日历联动,里面的"点",就是当前创建日期对象后,获得的年,月。根据这个年,月,来去设置右边,即下个月该显示的东西。那么只要当前获取的年,月,有变化,后面的自然也会变化。也就“联动”了。
  当然里面还是有点小多细节,处理。

四、上代码,太长了,所以只放了结构,里面的内容可以下载文章最后的DEMO
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • 2017-08-16jQuery实现购物车数字加减效果
  • 2017-08-16jQuery中extend函数的实现原理详解
  • 2017-08-16jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
  • 2017-08-16jquery按回车提交数据的代码示例
  • 2017-08-16jQuery树形插件jquery.simpleTree.js用法分析
  • 2017-08-16javascript的变量、传值、传址、参数之间关系
  • 2017-08-16基于Jquery的动态创建DOM元素的代码
  • 2017-08-16jQuery表格(Table)基本操作实例分析
  • 2017-08-16jquery实现仿新浪微博评论滚动效果
  • 2017-08-16jQuery实现图片文字淡入淡出效果

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery通过扩展实现抖动效果的方法
    • jQuery基于BootStrap样式实现无限极地区联动
    • jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
    • IE8下Jquery获取select选中的值post到后台报错问题
    • jQuery实现的简单拖动层示例
    • jQuery 解析xml文件
    • jQuery实现字符串全部替换的方法【推荐】
    • jQuery层级选择器用法分析
    • Jquery判断radio、selelct、checkbox是否选中及获取选中值方法总结
    • 基于jQuery实现简单人工智能聊天室

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有