jQuery 联动日历实现代码

2020-05-22 16:48:14易采站长站整理

//获得左和右的月份一号是星期几
getfirstD(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY);
//创建HTML结构
creatHtml();
//将结构插入到DOM当中
insertHtml();
//插入日期到左和右的表格TD当中
insertdate(lfday,rfday);
//展开日期
nowDate.add(nextDate).slideDown(200);
}
},function(){
//加这个判断是防止连续点击
if(!nowDate.add(nextDate).is(“:animated”)){
//收起日历
nowDate.add(nextDate).slideUp(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