jQuery联动日历实现代码

看一下效果图。

首先，我们来谈谈以下功能：1。单击确定显示日历2。再次单击隐藏，或从DOM中删除此日历。比如重复第一步和第二步。3.让日历显示当前的月份和日期(多少天，每天是几号)。4.将当前月份的日期与星期几匹配。5.关联左侧的日历。其次，我们来谈谈HTML的结构。1.上面的蓝色是一个DIV，显示的是当月、上月和下月。2.以下日期和星期存储在表结构中。用星期的数字和日期的数字。3.功能扩展分析：3.1。前两个功能？让我想起了在JQUERY中使用toggle。很容易解决。3.2.让日历显示当前的月份和日期？既然和日期有关，我肯定会想到对象Deta。在这个对象中，我们可以获取或设置年、日、月、日和周的日期。但是你就是不能直接得到这个月的天数。怎么办？所以我们只能用判断。根据当月的价值。将天数存储在变量中。(对象获取的当月应为1。从头开始计算)。比如是五月，根据判断，五月大，所以变量中有一个值31；也就是这个月有31天。3.3.让当月的日期对应于一周中的某一天。这个问题的解决方法是在当月的1号得到对应的星期几。后面的可以依次排列。我理解，因为所有的TD标签都存储在日期上，这些TD的所有索引都排列在TBODY中，所以在那个TD中插入数字1，后面的数字2就会插入到下一个TD中。3.4.连接左侧的日历。这里的重点是“联想”:最近写了“倒计时”，然后这个“联动日历”，也让我想起了“联动下拉菜单”，比如省市联动下拉菜单；这些都涉及到“联动”。我总结过，需要“联动”的事情一定要有“点”(先这么说吧)，其他需要改变的事情一定要和这个点联系起来。如果这个点改变了，与这个点相关的其他东西也会改变，从而实现“联动”的效果。例如，最后一个“倒计时”中的“点”是当前时间和设定时间之差之前的“总毫秒数”。显示的小时、分钟和秒钟都与这个“总毫秒数”相关。只要这个‘总毫秒数’改变，小时、分钟、秒钟都会改变，这就叫‘联动’。此日历链接中的“点”是创建日期对象后获得的年和月。根据今年，月份，过来设置右边，也就是下个月应该显示什么。所以只要当前获取的年、月发生变化，后者自然也会发生变化。就是“联动”。当然，里面还有一点细节。

第四，代码太长，只放结构，内容可以下载。文章的最终DEMO副本代码如下： $ (function () {var nowdate=$(')。nowdate ')，//左侧日历框nextDate=$('。nextDate ')，//右侧日历框lstrTd=' '，//左侧日期行rstrTd=' '，//右侧日期行lrows=0，//左侧日期行rrows=0，//右侧日期行iHtmlNow=' '，//左侧日历结构iHtmlNext=' '，//右侧日历结构nowTitleDateM=' '，//左侧标题年份nowlastM=' '， //左边翻转的月份显示nexttitledate=' '，//右边标题year为nextTitleDateM=' '，//右边显示的月份为nextLastM=' '，//右边翻转的月份显示creatbtu=true，//开关numday=0只创建一次HTML结构，//左边为每月天数； Umday=0，//左边是每月的天数；Lfday=0，//左边当月的第一天是一周的第一天，rfday=0；//右边当月的第一天是一周的第一天。//创建日期行函数creatTr(l，r){} /*创建当前和下个月的日期和年份*这里有三种情况，当前月份是12月，当前月份是11月，当前月份是1月*/函数gettitledate(){var雪夜=new date()；//如果当前月份是12月，那么正确的月份应该是1月。//如果当前月份是11月，那么正确的月份应该是1月。//如果当前月份是一月，那么剩下的月份应该是十二月。}/*获取当月的第一天和星期几。*首先设定年份、月份和需要了解的内容。*/函数get firstd (m1，y1，m2，y2){ }//根据月份和大小获取天数。函数get dday (m1，y1，m2，y2){ }//根据传入的年份参数，判断是否为运行年份，即可以被4整除，但不能被100整除，同时满足。或者被400整除；函数isRunYear(y){} //创建HMTL结构函数creatHtml(creatbtu){ //根据当月1日的星期几，生成几行来存储所有的日期} //将日期插入到对应的TD函数insertdate(d，T){ //插入到左边//插入到边上} //插入到DOM函数insertHtml(){} //删除函数delHtml(){} //点击确定显示或隐藏日历$ ('input [type=button]')。切换(函数(){//添加此判断，防止连续点击确定按钮，如果。NOWDATE。添加(下一个日期)。信息系统(' :动画')现在。添加(下一个日期)。IS(' 3360 empty '){//获取标题上方的年和月getTitleDate()；//获取左、右月的天数getdday(nowtitledatem，now title datem，next tiled tem，next tiled tem)；//获取左、右月1日的星期几，getfirstd (nowtitledatem，nowtitledatem，next title tem，next title tem)；//创建HTML结构creatHtml()；//将结构插入DOM insertHtml()；//在左右表格中插入日期TD insertdate(lfday，rfday)；//立即展开日期。添加(下一个日期)。下滑(200)；} }，函数(){ //添加此判断防止连续点击if(！现在。添加(下一个日期)。是(' :动画'){//立即关闭日历。添加(下一个日期)。向上滑动(200)；//从DOM中删除日历结构DelHTML()；} });}) 4.1分析完代码结构，看注释就能理解。以下步骤：1。获取当前年份和月份(链接“点”)2。获取左右对应月份的天数；3.获取左侧和右侧的每月第一分钟，对应于一周中的某一天。4.有了以上内容，我们就可以创建HTML结构(因为我们必须根据月份中的日期排列来决定是创建五行还是六行。显示日期)5。将创建的结构插入到DOM 6中。然后将得到的天数，即日期数，插入到对应表存储日期的TD中；五.摘要1。不处理TR分支，只需将tbody中的td作为一个整体数组，并向其中插入数据；(因为显示数字，所以可以匹配)2。“联动”规则3。像这样插入大量数据的事情应该通过以下方式解决。4。

如果像这样的数据很多，应该先存储在数组中(因为这个例子显示的是数字，可以直接使用循环中的变量；如果是值，应该先存储在数组中，根据索引取出)。在线演示：http://demo.jb51.net/js/2012/mycalendar/DEMO下载：mycalendar_jb51.rar