jQuery 聯(lián)動(dòng)日歷實(shí)現(xiàn)代碼
更新時(shí)間:2012年05月31日 20:59:55 作者:
首先還是感謝下 妙味課堂 錄制的這一個(gè)日歷聯(lián)動(dòng)的視頻,正好整理下,方便需要的朋友
來看下效果圖

一、先來說下功能:
1.點(diǎn)擊“確定”顯示日歷
2。再次點(diǎn)擊隱藏,或從DOM中刪除這個(gè)日歷。如些反復(fù)第一,和第二這兩步。
3.讓日歷中顯示當(dāng)前月份日期(多少天,每天是多少號(hào))。
4.讓當(dāng)前月份的日期和星期幾對(duì)應(yīng).
5.讓左邊兩邊的日歷關(guān)聯(lián)起來。
二、再來說下HTML結(jié)構(gòu)。
1.上面藍(lán)色的是一個(gè)DIV,顯示當(dāng)前月分,和上月,下月。
2.下面的日期和星期,是用一個(gè)table結(jié)構(gòu)存放數(shù)據(jù)。星期用thead,日期用:tbody存放。
三、功能展開分析:
3.1、前兩個(gè)功能?
讓我想起使用JQUERY里面的toggle。很方便就可以解決。
3.2、讓日歷中顯示當(dāng)前月份日期數(shù)?
既然跟日期有關(guān)的,肯定會(huì)想起Deta這個(gè)對(duì)象了。在這個(gè)對(duì)象中,我們可以獲取或設(shè)某年,某天,某月,某日,某星期幾。但就是不能直接獲取這一個(gè)月中有多少天。?怎么辦呢?
所以我們只能用判斷了。根據(jù)當(dāng)前月份的數(shù)值。來把天數(shù)存到一個(gè)變量當(dāng)中。(對(duì)象獲取到的當(dāng)前月份要+1。國它是從零開始計(jì)算的).
比如現(xiàn)在是五月,根據(jù)判斷,五月是大,所以變量中就存31這個(gè)數(shù)值;即這個(gè)月有31天。
3.3、讓當(dāng)前月份的日期和星期幾對(duì)應(yīng).??
這個(gè)問題,解決辦法就是,獲取到當(dāng)月一號(hào),對(duì)應(yīng)的星期幾。后面的就可以依次排列下去了。這里的依次排列,我理解的是,因?yàn)榇娣湃掌诘亩际荰D標(biāo)簽,在TBODY里面這些TD的索引,都是排列好的,所以把一號(hào)插入到那個(gè)TD當(dāng)中,后面的二號(hào),就會(huì)插入到后一個(gè)TD當(dāng)中了。
3.4、讓左邊兩邊的日歷關(guān)聯(lián)起來。
這里重點(diǎn)是“關(guān)聯(lián)”:我最近寫了“倒計(jì)時(shí)”,再就是這次的"聯(lián)動(dòng)日歷",還有讓我想起了“聯(lián)動(dòng)下拉菜單”,比如省份和市的聯(lián)動(dòng)下拉菜單;這些都涉汲到“聯(lián)動(dòng)”.
我總結(jié)了一下,就是需要“聯(lián)動(dòng)”的東西,必定有一個(gè)“點(diǎn)”(先這么叫吧),其它需要變化,都要和這個(gè)點(diǎn)相關(guān)聯(lián)起來,這樣改變這個(gè)點(diǎn),其它和這個(gè)點(diǎn)關(guān)聯(lián)的東西,也就都會(huì)發(fā)生改變,也就實(shí)現(xiàn)了“聯(lián)動(dòng)”這一效果。
比如,上次的“倒計(jì)時(shí)”,里面的“點(diǎn)”,就是當(dāng)前時(shí)間和設(shè)定以后時(shí)間,之前相差的"總毫秒數(shù)"。倒計(jì)時(shí)顯示的,時(shí),分,秒,都和這個(gè)"總毫秒數(shù)"有關(guān)聯(lián),只要這個(gè)“總毫秒數(shù)”變化,那么時(shí),分,秒,都會(huì)變化,這就是"聯(lián)動(dòng)"了.
這次的日歷聯(lián)動(dòng),里面的"點(diǎn)",就是當(dāng)前創(chuàng)建日期對(duì)象后,獲得的年,月。根據(jù)這個(gè)年,月,來去設(shè)置右邊,即下個(gè)月該顯示的東西。那么只要當(dāng)前獲取的年,月,有變化,后面的自然也會(huì)變化。也就“聯(lián)動(dòng)”了。
當(dāng)然里面還是有點(diǎn)小多細(xì)節(jié),處理。
四、上代碼,太長了,所以只放了結(jié)構(gòu),里面的內(nèi)容可以下載文章最后的DEMO
$(function(){
var nowDate = $(".nowDate"), //左邊的日歷盒子
nextDate = $(".nextDate"), //右邊的日歷盒子
lstrTd = "", //左日期的行的DOM結(jié)構(gòu)
rstrTd = "", //右日期的行的DOM結(jié)構(gòu)
lrows = 0, //左日期行數(shù)
rrows = 0, //右日期行數(shù)
iHtmlNow = "", //左邊的日歷結(jié)構(gòu)
iHtmlNext = "", //右邊的日歷的結(jié)構(gòu)
nowTitleDateY = "", //左邊標(biāo)題年份
nowTitleDateM = "", //左邊顯示的月份
nowlastM = "", //左邊的翻月顯示
nextTitleDateY = "", //右邊標(biāo)題年份
nextTitleDateM = "", //右邊顯示的月份
nextLastM = "", //右邊的翻月顯示
creatbtu = true, //只創(chuàng)建一次HTML結(jié)構(gòu)的開關(guān)
NumDay = 0, //左邊每個(gè)月的天數(shù);
rNumDay = 0, //左邊每個(gè)月的天數(shù);
lfday = 0, //左邊當(dāng)前月份的第一天,是星期幾
rfday = 0; //右邊當(dāng)前月份的第一天,是星期幾
//創(chuàng)建日期行
function creatTr(l,r){
}
/*創(chuàng)建當(dāng)前和下一個(gè)月的日期和年份
*這里分三種情況,當(dāng)前月為12月 當(dāng)前月為11月,當(dāng)前月為1月
*/
function getTitleDate(){
var odate = new Date();
//如果當(dāng)前月是12月分,那么右邊的月份,就應(yīng)該是1月份
//如果當(dāng)前月是11月分,那么右邊的月份,就應(yīng)該是1月份
//如果當(dāng)前月是1月分,那么左邊的月份,就應(yīng)該是12月份
}
/*獲取當(dāng)前月份的一號(hào),是星期幾
*首先設(shè)置你創(chuàng)建日期對(duì)象的年份,月份,和你需要知道的日期數(shù),把這些設(shè)置好之后,再使用getDay()方法,就可以獲取你設(shè)置日期的,星期數(shù)了;
*/
function getfirstD(m1,y1,m2,y2){
}
//根據(jù)大小月份取得天數(shù)
function getTdDay(m1,y1,m2,y2){
}
//根據(jù)傳入的年份參數(shù),判斷是否是潤年,即能夠被4整除,但不能被100整除,同時(shí)滿足時(shí);或者能被400整除;
function isRunYear(y){
}
//創(chuàng)建HMTL結(jié)構(gòu)
function creatHtml(creatbtu){
//根據(jù)當(dāng)前月份的一號(hào)是星期幾,來生成有幾行存放所有日期
}
//將日期插入到對(duì)應(yīng)的TD當(dāng)中
function insertdate(d,t){
//插入到左邊
//插入到邊
}
//插入到DOM
function insertHtml(){
}
//從DOM中刪除
function delHtml(){
}
//點(diǎn)擊確定顯示或隱藏日歷
$("input[type=button]").toggle(function(){
//加這個(gè)判斷是防止連續(xù)點(diǎn)擊確定按鈕
if(!nowDate.add(nextDate).is(":animated")&&nowDate.add(nextDate).is(":empty")){
//獲得標(biāo)題上面的年份和月份
getTitleDate();
//獲得左和右的月份的天數(shù)
getTdDay(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY);
//獲得左和右的月份一號(hào)是星期幾
getfirstD(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY);
//創(chuàng)建HTML結(jié)構(gòu)
creatHtml();
//將結(jié)構(gòu)插入到DOM當(dāng)中
insertHtml();
//插入日期到左和右的表格TD當(dāng)中
insertdate(lfday,rfday);
//展開日期
nowDate.add(nextDate).slideDown(200);
}
},function(){
//加這個(gè)判斷是防止連續(xù)點(diǎn)擊
if(!nowDate.add(nextDate).is(":animated")){
//收起日歷
nowDate.add(nextDate).slideUp(200);
//從DOM中刪除日歷結(jié)構(gòu)
delHtml();
}
});
})
4.1分析下這代碼結(jié)構(gòu)看注解就可以明白的,以下幾個(gè)步驟:
1.獲得當(dāng)前年份,月份(聯(lián)動(dòng)的“點(diǎn)”)
2.獲得左邊和右邊對(duì)應(yīng)月份的天數(shù);
3.獲得左邊和右邊月分當(dāng)中一號(hào),分別對(duì)應(yīng)的是星期幾
4.有了以上東西,我們就可以創(chuàng)建HTML結(jié)構(gòu)了(因?yàn)橐鶕?jù)月份當(dāng)中的日期排列,來決定,創(chuàng)建五行,還是六行。來顯示日期)
5.將創(chuàng)建好的結(jié)構(gòu),插入到DOM當(dāng)中
6.再將獲得的天數(shù),也就是日期數(shù),插入到對(duì)應(yīng)的表格存放日期的TD當(dāng)中;
五、總結(jié)
1.不用把TR分行處理,只接把tbody里面的td做為一個(gè)整體的數(shù)組,往里面插入數(shù)據(jù);(因?yàn)轱@示的是數(shù)字,正好可以和)
2.“聯(lián)動(dòng)”的規(guī)則
3.像這種類似插入很多數(shù)據(jù)的東西,要用循解決。
4。像這種數(shù)據(jù)多的,應(yīng)該先存放到數(shù)組中(因?yàn)楸纠@示的是數(shù)字,所以可以直接用循環(huán)里面的變量,如果是值,要先存放到數(shù)組中,根據(jù)索引取出來)
在線演示:http://demo.jb51.net/js/2012/mycalendar/
DEMO下載:mycalendar_jb51.rar

一、先來說下功能:
1.點(diǎn)擊“確定”顯示日歷
2。再次點(diǎn)擊隱藏,或從DOM中刪除這個(gè)日歷。如些反復(fù)第一,和第二這兩步。
3.讓日歷中顯示當(dāng)前月份日期(多少天,每天是多少號(hào))。
4.讓當(dāng)前月份的日期和星期幾對(duì)應(yīng).
5.讓左邊兩邊的日歷關(guān)聯(lián)起來。
二、再來說下HTML結(jié)構(gòu)。
1.上面藍(lán)色的是一個(gè)DIV,顯示當(dāng)前月分,和上月,下月。
2.下面的日期和星期,是用一個(gè)table結(jié)構(gòu)存放數(shù)據(jù)。星期用thead,日期用:tbody存放。
三、功能展開分析:
3.1、前兩個(gè)功能?
讓我想起使用JQUERY里面的toggle。很方便就可以解決。
3.2、讓日歷中顯示當(dāng)前月份日期數(shù)?
既然跟日期有關(guān)的,肯定會(huì)想起Deta這個(gè)對(duì)象了。在這個(gè)對(duì)象中,我們可以獲取或設(shè)某年,某天,某月,某日,某星期幾。但就是不能直接獲取這一個(gè)月中有多少天。?怎么辦呢?
所以我們只能用判斷了。根據(jù)當(dāng)前月份的數(shù)值。來把天數(shù)存到一個(gè)變量當(dāng)中。(對(duì)象獲取到的當(dāng)前月份要+1。國它是從零開始計(jì)算的).
比如現(xiàn)在是五月,根據(jù)判斷,五月是大,所以變量中就存31這個(gè)數(shù)值;即這個(gè)月有31天。
3.3、讓當(dāng)前月份的日期和星期幾對(duì)應(yīng).??
這個(gè)問題,解決辦法就是,獲取到當(dāng)月一號(hào),對(duì)應(yīng)的星期幾。后面的就可以依次排列下去了。這里的依次排列,我理解的是,因?yàn)榇娣湃掌诘亩际荰D標(biāo)簽,在TBODY里面這些TD的索引,都是排列好的,所以把一號(hào)插入到那個(gè)TD當(dāng)中,后面的二號(hào),就會(huì)插入到后一個(gè)TD當(dāng)中了。
3.4、讓左邊兩邊的日歷關(guān)聯(lián)起來。
這里重點(diǎn)是“關(guān)聯(lián)”:我最近寫了“倒計(jì)時(shí)”,再就是這次的"聯(lián)動(dòng)日歷",還有讓我想起了“聯(lián)動(dòng)下拉菜單”,比如省份和市的聯(lián)動(dòng)下拉菜單;這些都涉汲到“聯(lián)動(dòng)”.
我總結(jié)了一下,就是需要“聯(lián)動(dòng)”的東西,必定有一個(gè)“點(diǎn)”(先這么叫吧),其它需要變化,都要和這個(gè)點(diǎn)相關(guān)聯(lián)起來,這樣改變這個(gè)點(diǎn),其它和這個(gè)點(diǎn)關(guān)聯(lián)的東西,也就都會(huì)發(fā)生改變,也就實(shí)現(xiàn)了“聯(lián)動(dòng)”這一效果。
比如,上次的“倒計(jì)時(shí)”,里面的“點(diǎn)”,就是當(dāng)前時(shí)間和設(shè)定以后時(shí)間,之前相差的"總毫秒數(shù)"。倒計(jì)時(shí)顯示的,時(shí),分,秒,都和這個(gè)"總毫秒數(shù)"有關(guān)聯(lián),只要這個(gè)“總毫秒數(shù)”變化,那么時(shí),分,秒,都會(huì)變化,這就是"聯(lián)動(dòng)"了.
這次的日歷聯(lián)動(dòng),里面的"點(diǎn)",就是當(dāng)前創(chuàng)建日期對(duì)象后,獲得的年,月。根據(jù)這個(gè)年,月,來去設(shè)置右邊,即下個(gè)月該顯示的東西。那么只要當(dāng)前獲取的年,月,有變化,后面的自然也會(huì)變化。也就“聯(lián)動(dòng)”了。
當(dāng)然里面還是有點(diǎn)小多細(xì)節(jié),處理。
四、上代碼,太長了,所以只放了結(jié)構(gòu),里面的內(nèi)容可以下載文章最后的DEMO
復(fù)制代碼 代碼如下:
$(function(){
var nowDate = $(".nowDate"), //左邊的日歷盒子
nextDate = $(".nextDate"), //右邊的日歷盒子
lstrTd = "", //左日期的行的DOM結(jié)構(gòu)
rstrTd = "", //右日期的行的DOM結(jié)構(gòu)
lrows = 0, //左日期行數(shù)
rrows = 0, //右日期行數(shù)
iHtmlNow = "", //左邊的日歷結(jié)構(gòu)
iHtmlNext = "", //右邊的日歷的結(jié)構(gòu)
nowTitleDateY = "", //左邊標(biāo)題年份
nowTitleDateM = "", //左邊顯示的月份
nowlastM = "", //左邊的翻月顯示
nextTitleDateY = "", //右邊標(biāo)題年份
nextTitleDateM = "", //右邊顯示的月份
nextLastM = "", //右邊的翻月顯示
creatbtu = true, //只創(chuàng)建一次HTML結(jié)構(gòu)的開關(guān)
NumDay = 0, //左邊每個(gè)月的天數(shù);
rNumDay = 0, //左邊每個(gè)月的天數(shù);
lfday = 0, //左邊當(dāng)前月份的第一天,是星期幾
rfday = 0; //右邊當(dāng)前月份的第一天,是星期幾
//創(chuàng)建日期行
function creatTr(l,r){
}
/*創(chuàng)建當(dāng)前和下一個(gè)月的日期和年份
*這里分三種情況,當(dāng)前月為12月 當(dāng)前月為11月,當(dāng)前月為1月
*/
function getTitleDate(){
var odate = new Date();
//如果當(dāng)前月是12月分,那么右邊的月份,就應(yīng)該是1月份
//如果當(dāng)前月是11月分,那么右邊的月份,就應(yīng)該是1月份
//如果當(dāng)前月是1月分,那么左邊的月份,就應(yīng)該是12月份
}
/*獲取當(dāng)前月份的一號(hào),是星期幾
*首先設(shè)置你創(chuàng)建日期對(duì)象的年份,月份,和你需要知道的日期數(shù),把這些設(shè)置好之后,再使用getDay()方法,就可以獲取你設(shè)置日期的,星期數(shù)了;
*/
function getfirstD(m1,y1,m2,y2){
}
//根據(jù)大小月份取得天數(shù)
function getTdDay(m1,y1,m2,y2){
}
//根據(jù)傳入的年份參數(shù),判斷是否是潤年,即能夠被4整除,但不能被100整除,同時(shí)滿足時(shí);或者能被400整除;
function isRunYear(y){
}
//創(chuàng)建HMTL結(jié)構(gòu)
function creatHtml(creatbtu){
//根據(jù)當(dāng)前月份的一號(hào)是星期幾,來生成有幾行存放所有日期
}
//將日期插入到對(duì)應(yīng)的TD當(dāng)中
function insertdate(d,t){
//插入到左邊
//插入到邊
}
//插入到DOM
function insertHtml(){
}
//從DOM中刪除
function delHtml(){
}
//點(diǎn)擊確定顯示或隱藏日歷
$("input[type=button]").toggle(function(){
//加這個(gè)判斷是防止連續(xù)點(diǎn)擊確定按鈕
if(!nowDate.add(nextDate).is(":animated")&&nowDate.add(nextDate).is(":empty")){
//獲得標(biāo)題上面的年份和月份
getTitleDate();
//獲得左和右的月份的天數(shù)
getTdDay(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY);
//獲得左和右的月份一號(hào)是星期幾
getfirstD(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY);
//創(chuàng)建HTML結(jié)構(gòu)
creatHtml();
//將結(jié)構(gòu)插入到DOM當(dāng)中
insertHtml();
//插入日期到左和右的表格TD當(dāng)中
insertdate(lfday,rfday);
//展開日期
nowDate.add(nextDate).slideDown(200);
}
},function(){
//加這個(gè)判斷是防止連續(xù)點(diǎn)擊
if(!nowDate.add(nextDate).is(":animated")){
//收起日歷
nowDate.add(nextDate).slideUp(200);
//從DOM中刪除日歷結(jié)構(gòu)
delHtml();
}
});
})
4.1分析下這代碼結(jié)構(gòu)看注解就可以明白的,以下幾個(gè)步驟:
1.獲得當(dāng)前年份,月份(聯(lián)動(dòng)的“點(diǎn)”)
2.獲得左邊和右邊對(duì)應(yīng)月份的天數(shù);
3.獲得左邊和右邊月分當(dāng)中一號(hào),分別對(duì)應(yīng)的是星期幾
4.有了以上東西,我們就可以創(chuàng)建HTML結(jié)構(gòu)了(因?yàn)橐鶕?jù)月份當(dāng)中的日期排列,來決定,創(chuàng)建五行,還是六行。來顯示日期)
5.將創(chuàng)建好的結(jié)構(gòu),插入到DOM當(dāng)中
6.再將獲得的天數(shù),也就是日期數(shù),插入到對(duì)應(yīng)的表格存放日期的TD當(dāng)中;
五、總結(jié)
1.不用把TR分行處理,只接把tbody里面的td做為一個(gè)整體的數(shù)組,往里面插入數(shù)據(jù);(因?yàn)轱@示的是數(shù)字,正好可以和)
2.“聯(lián)動(dòng)”的規(guī)則
3.像這種類似插入很多數(shù)據(jù)的東西,要用循解決。
4。像這種數(shù)據(jù)多的,應(yīng)該先存放到數(shù)組中(因?yàn)楸纠@示的是數(shù)字,所以可以直接用循環(huán)里面的變量,如果是值,要先存放到數(shù)組中,根據(jù)索引取出來)
在線演示:http://demo.jb51.net/js/2012/mycalendar/
DEMO下載:mycalendar_jb51.rar
您可能感興趣的文章:
相關(guān)文章
jQuery+CSS3文字跑馬燈特效的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猨Query+CSS3文字跑馬燈特效的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家看,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06JQuery validate插件驗(yàn)證用戶注冊信息
這篇文章主要為大家詳細(xì)介紹了JQuery validate插件驗(yàn)證用戶注冊信息的具體代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05jQuery實(shí)現(xiàn)拼圖小游戲(實(shí)例講解)
下面小編就為大家?guī)硪黄猨Query實(shí)現(xiàn)拼圖小游戲(實(shí)例講解)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07jquery中關(guān)于bind()方法的使用技巧分享
這篇文章主要給大家分享了jquery中關(guān)于bind()方法的使用技巧,文中介紹的非常詳細(xì),對(duì)大家具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-03-03