jQuery聯(lián)動日歷的實例解析
更新時間：2016年12月02日 15:33:47 作者：船長op
本篇文章主要對jQuery聯(lián)動日歷的實例進行解析說明。有興趣的朋友可以下載源碼調(diào)試運行試試看，希望對大家有所幫助
一、要實現(xiàn)的功能：
1.點擊上面的箭頭，切換至上一個月，或下一個月，并且是聯(lián)動的。
2.只要不是現(xiàn)實中的當月，那么顯示的日期，都是灰色底。
二、分析：
1.當我們點擊切換日期的箭頭時，要改變頂部藍色的年份和日期。
2.當我們點擊切換日期的箭頭時，下面TD的日期也要和上面顯示的月份對應起來。
3.用一個判斷，是否現(xiàn)實中的當月，來控制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
}
//天數(shù)和存放位置
update();
//插入到日期數(shù)的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
}
//天數(shù)和存放位置
update();
//插入到日期數(shù)的TD當中
insertTd();
//更新日期標題
updateTitle();
})
以上就是本文的全部內(nèi)容，希望對大家有所幫助，謝謝對腳本之家的支持！
您可能感興趣的文章:
相關(guān)文章
基于jQuery和CSS3制作數(shù)字時鐘附源碼下載(jquery篇)
本篇文章基于jquery讓數(shù)字時鐘真正的跑起來，實現(xiàn)一個帶有日期和星期的網(wǎng)頁版數(shù)字時鐘，效果非常逼真，感興趣的朋友一起看看吧2015-11-11
jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋
一個輕量級的cookie 插件，可以讀取、寫入、刪除 cookie。這篇文章主要介紹了jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋,需要的朋友可以參考下2017-03-03
jQuery+css3實現(xiàn)轉(zhuǎn)動的正方形效果(附demo源碼下載)
這篇文章主要介紹了jQuery+css3實現(xiàn)轉(zhuǎn)動的正方形效果,可實現(xiàn)圖片組集體轉(zhuǎn)動的功能,通過jQuery結(jié)合時間函數(shù)定時操作css3屬性實現(xiàn)旋轉(zhuǎn)效果,并附帶demo源碼供讀者下載,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細介紹了jQuery頁面彈出框?qū)崿F(xiàn)文件上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
JQuery上手簡單，也很容易學，即使是剛接觸JQuery的開發(fā)人員，借助JQuery手冊，也很快能在項目中使用開發(fā)，這篇文章針對jquery原理以及學習技巧進行介紹，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了jQuery使用deferreds串行多個ajax請求的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
jQuery Ajax實現(xiàn)Select多級關(guān)聯(lián)動態(tài)綁定數(shù)據(jù)的實例代碼
這篇文章主要介紹了jQuery Ajax實現(xiàn)Select多級關(guān)聯(lián)動態(tài)綁定數(shù)據(jù)的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-10-10
這篇文章主要介紹了jQuery實現(xiàn)的導航條點擊后高亮顯示功能,涉及jQuery事件響應及頁面元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-03-03
多功能jQuery樹插件zTree實現(xiàn)權(quán)限列表簡單實例
這篇文章主要介紹了多功能jQuery樹插件zTree實現(xiàn)權(quán)限列表簡單實例，優(yōu)異的性能、靈活的配置、多種功能的組合，是樹插件zTree最大的優(yōu)勢，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要為大家詳細介紹了jQuery內(nèi)存泄露解決辦法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12