jQuery联动日历的实例解析
更新时间：2016年12月02日 15:33:47 作者：船长op
本篇文章主要对jQuery联动日历的实例进行解析说明。有兴趣的朋友可以下载源码调试运行试试看，希望对大家有所帮助
一、要实现的功能：
1.点击上面的箭头，切换至上一个月，或下一个月，并且是联动的。
2.只要不是现实中的当月，那么显示的日期，都是灰色底。
二、分析：
1.当我们点击切换日期的箭头时，要改变顶部蓝色的年份和日期。
2.当我们点击切换日期的箭头时，下面TD的日期也要和上面显示的月份对应起来。
3.用一个判断，是否现实中的当月，来控制TD的背景色，是否为灰色
//点击更新前一个月
$(".pre").live("click",function(){
nowTitleDateM--;
if(nowTitleDateM == 11){
nowLastM = nowTitleDateM-1
nextTitleDateY--
nextTitleDateM = nowTitleDateM+1
nextLastM = 1
}else if(nowTitleDateM == 0){
nowTitleDateY--
nowTitleDateM = 12;
nowLastM = nowTitleDateM-1;
nextTitleDateM = 1;
nextLastM = nextTitleDateM+1
}else if(nowTitleDateM == 1){
nowLastM = 12;
nextTitleDateM = nowTitleDateM+1
nextLastM = nextTitleDateM+1
}else{
nowLastM = nowTitleDateM-1
nextTitleDateM = nowTitleDateM+1
nextLastM = nextTitleDateM+1
}
//天数和存放位置
update();
//插入到日期数的TD当中
insertTd();
//更新日期标题
updateTitle();
})
//点击下一个月
$(".next").live("click",function(){
nowTitleDateM++;
if(nowTitleDateM == 12){
nowLastM = nowTitleDateM-1
nextTitleDateY++
nextTitleDateM = 1
nextLastM = nextTitleDateM+1
}else if(nowTitleDateM == 11){
nowLastM = nowTitleDateM-1
nextTitleDateM = nowTitleDateM+1
nextLastM = 1
}else if(nowTitleDateM == 13){
nowTitleDateY++
nowTitleDateM = 1;
nowLastM = 12;
nextTitleDateM = nowTitleDateM+1;
nextLastM = nextTitleDateM+1
}else if(nowTitleDateM == 1){
nowLastM = 12;
nextTitleDateM = nowTitleDateM+1
nextLastM = nextTitleDateM+1
}else{
nowLastM = nowTitleDateM-1
nextTitleDateM = nowTitleDateM+1
nextLastM = nextTitleDateM+1
}
//天数和存放位置
update();
//插入到日期数的TD当中
insertTd();
//更新日期标题
updateTitle();
})
以上就是本文的全部内容，希望对大家有所帮助，谢谢对脚本之家的支持！
您可能感兴趣的文章:
相关文章
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
本篇文章基于jquery让数字时钟真正的跑起来，实现一个带有日期和星期的网页版数字时钟，效果非常逼真，感兴趣的朋友一起看看吧2015-11-11
一个轻量级的cookie 插件，可以读取、写入、删除 cookie。这篇文章主要介绍了jQuery.cookie.js使用方法及相关参数解释,需要的朋友可以参考下2017-03-03
jQuery+css3实现转动的正方形效果(附demo源码下载)
这篇文章主要介绍了jQuery+css3实现转动的正方形效果,可实现图片组集体转动的功能,通过jQuery结合时间函数定时操作css3属性实现旋转效果,并附带demo源码供读者下载,需要的朋友可以参考下2016-01-01
这篇文章主要为大家详细介绍了jQuery页面弹出框实现文件上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
JQuery上手简单，也很容易学，即使是刚接触JQuery的开发人员，借助JQuery手册，也很快能在项目中使用开发，这篇文章针对jquery原理以及学习技巧进行介绍，感兴趣的小伙伴们可以参考一下2015-11-11
这篇文章主要介绍了jQuery使用deferreds串行多个ajax请求的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-08-08
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
这篇文章主要介绍了jQuery Ajax实现Select多级关联动态绑定数据的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了jQuery实现的导航条点击后高亮显示功能,涉及jQuery事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下2019-03-03
这篇文章主要介绍了多功能jQuery树插件zTree实现权限列表简单实例，优异的性能、灵活的配置、多种功能的组合，是树插件zTree最大的优势，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要为大家详细介绍了jQuery内存泄露解决办法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论