jQuery 連動日曆實作程式碼_jquery

來看下效果圖

一、先來說下功能：

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

複製程式碼 程式碼如下:

$(function(){
var nowDate = $(".nowDate"), //左邊的行事曆盒
nextDate = $(".nextDate"), //右邊的行事曆盒子
lstrTd = "", //左日期的行的DOM結構
rstrTd = "", //右日期的行的DOM結構
lrows = 0, //左日期行數
rrows = 0, //右日期行數
iHtmlNow = "", //左邊的日曆結構
iHtmlNext = "", //右邊的日曆的結構
nowTitleDateY = "", //左邊標題年份
nowTitleDateM = "", //左邊顯示的月份
nowlastM = "", //左邊的翻月顯示
nextTitleDateY = "", //右邊標題年份
nextTitleDateM = "", //右邊顯示的月份
nextLastM = "", //右邊的翻月顯示
creatbtu = true, //只建立一次HTML結構的開關
NumDay = 0, //左邊每個月的天數;
rNumDay = 0, //左邊每個月的天數;
lfday = 0, //左邊目前月份的第一天，是星期幾
rfday = 0; / /右邊目前月份的第一天,是星期幾
//建立日期行
function creatTr(l,r){
}
/*建立目前和下個月的日期和年份
*這裡有三種情況，當前月為12月當前月為11月，當前月為1月
*/
function getTitleDate(){
var odate = new Date();
//如果目前月是12月分，那麼右邊的月份，就應該是1月份
//如果當前月是11月分，那麼右邊的月份，就應該是1月份
/ /如果目前月是1月分，那麼左邊的月份，就應該是12月份
}
/*取得目前月份的一號，是星期幾
*先設定你建立日期物件的年份，月份，和你需要知道的日期數，把這些設定好之後，再使用getDay()方法，就可以取得你設定日期的，星期數了；
*/
function getfirstD(m1,y1 ,m2,y2){
}
//依大小月份取得天數
function getTdDay(m1,y1,m2,y2){
}
//依據傳入的年份參數，判斷是否為潤年，即能夠被4整除，但不能被100整除，同時滿足時；或者能被400整除；
function isRunYear(y){
}
//創建HMTL結構
function creatHtml(creatbtu){
//根據當月的一號是星期幾，來產生有幾行存放所有日期
}
//將日期插入對應的TD當中
function insertdate(d,t){
//插入到左邊
//插入到邊
}
//插入DOM
function insertHtml(){
}
//從DOM移除
function delHtml(){
}
//點選確定顯示或隱藏行事曆
$("input[type=button]").toggle(function (){
//加上這個判斷是防止連續點擊確定按鈕
if(!nowDate.add(nextDate).is(":animated")&&nowDate.add(nextDate).is(":empty" )){
//取得標題上面的年份和月份
getTitleDate();
//獲得左和右的月份的天數
getTdDay(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateM,nextTitleDateY 🎜>//獲得左和右的月份一號是星期幾
getfirstD(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY);
//創建HTML結構
creatHtt()
//創建HTML結構
creatHtt();結構插入到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