Jquery中文網 www.prqmtc.live
Jquery中文網 >  jQuery  >  jquery 教程  >  正文 jQuery 聯動日歷實現代碼

jQuery 聯動日歷實現代碼

發布時間:2013-05-23   編輯:www.prqmtc.live
首先還是感謝下 妙味課堂 錄制的這一個日歷聯動的視頻,正好整理下,方便需要的朋友
首先還是感謝下 妙味課堂 錄制的這一個日歷聯動的視頻,正好整理下,方便需要的朋友 來看下效果圖

一、先來說下功能:

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,nextTitleDateY);
//獲得左和右的月份一號是星期幾
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


您可能感興趣的文章:
jQuery 聯動日歷實現代碼
為開發者準備的10款最好的jQuery日歷插件
jQuery EasyUI 的EasyLoader功能介紹
jQuery的中文日歷插件 jQuery.datePickerCn
jQuery雙日歷 Date Range Picker
jQuery雙日歷 Date Range Picker
jquery怎樣實現ajax聯動框(一)
jquery插件 autoComboBox 下拉框
jquery怎樣實現ajax聯動框(二)
jQuery雙日歷插件 jQuery Datepicker

[關閉]
一分赛车计划app 科创板股票涨跌限制 北川景子 股票分析师微信头像 金元配资 五分彩 36策略配资 美国股票指数比中国股票指数高 股豆网配资 老友配资 融凯配资 3d试机号 七乐彩