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、讓左邊兩邊的日歷關聯起來。
這里重點是“關聯”:我最近寫了“倒計時”,再就是這次的"聯動日歷"，還有讓我想起了“聯動下拉菜單”,比如省份和市的聯動下拉菜單;這些都涉汲到“聯動”.
我總結了一下，就是需要“聯動”的東西，必定有一個“點”(先這么叫吧)，其它需要變化，都要和這個點相關聯起來，這樣改變這個點，其它和這個點關聯的東西，也就都會發(fā)生改變，也就實現了“聯動”這一效果。
比如，上次的“倒計時”，里面的“點”,就是當前時間和設定以后時間，之前相差的"總毫秒數"。倒計時顯示的，時，分，秒，都和這個"總毫秒數"有關聯，只要這個“總毫秒數”變化，那么時，分，秒，都會變化，這就是"聯動"了.
這次的日歷聯動,里面的"點",就是當前創(chuàng)建日期對象后，獲得的年，月。根據這個年，月，來去設置右邊，即下個月該顯示的東西。那么只要當前獲取的年，月，有變化，后面的自然也會變化。也就“聯動”了。
當然里面還是有點小多細節(jié)，處理。
四、上代碼，太長了，所以只放了結構，里面的內容可以下載文章最后的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, //只創(chuàng)建一次HTML結構的開關
- NumDay = 0, //左邊每個月的天數;
- rNumDay = 0, //左邊每個月的天數;
- lfday = 0, //左邊當前月份的第一天，是星期幾
- rfday = 0; //右邊當前月份的第一天,是星期幾
- //創(chuàng)建日期行
- function creatTr(l,r){
- }
- /*創(chuàng)建當前和下一個月的日期和年份
- *這里分三種情況，當前月為12月 當前月為11月，當前月為1月
- */
- function getTitleDate(){
- var odate = new Date();
- //如果當前月是12月分，那么右邊的月份，就應該是1月份
- //如果當前月是11月分，那么右邊的月份，就應該是1月份
- //如果當前月是1月分，那么左邊的月份，就應該是12月份
- }
- /*獲取當前月份的一號，是星期幾
- *首先設置你創(chuàng)建日期對象的年份，月份，和你需要知道的日期數，把這些設置好之后，再使用getDay()方法，就可以獲取你設置日期的，星期數了；
- */
- function getfirstD(m1,y1,m2,y2){
- }
- //根據大小月份取得天數
- function getTdDay(m1,y1,m2,y2){
- }
- //根據傳入的年份參數，判斷是否是潤年，即能夠被4整除，但不能被100整除，同時滿足時；或者能被400整除；
- function isRunYear(y){
- }
- //創(chuàng)建HMTL結構
- function creatHtml(creatbtu){
- //根據當前月份的一號是星期幾，來生成有幾行存放所有日期
- }
- //將日期插入到對應的TD當中
- function insertdate(d,t){
- //插入到左邊
- //插入到邊
- }
- //插入到DOM
- function insertHtml(){
- }
- //從DOM中刪除
- function delHtml(){
- }
- //點擊確定顯示或隱藏日歷
- $("input[type=button]").toggle(function(){
- //加這個判斷是防止連續(xù)點擊確定按鈕
- if(!nowDate.add(nextDate).is(":animated")&&nowDate.add(nextDate).is(":empty")){
- //獲得標題上面的年份和月份
- getTitleDate();
- //獲得左和右的月份的天數
- getTdDay(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY);
- //獲得左和右的月份一號是星期幾
- getfirstD(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY);
- //創(chuàng)建HTML結構
- creatHtml();
- //將結構插入到DOM當中
- insertHtml();
- //插入日期到左和右的表格TD當中
- insertdate(lfday,rfday);
- //展開日期
- nowDate.add(nextDate).slideDown(200);
- }
- },function(){
- //加這個判斷是防止連續(xù)點擊
- if(!nowDate.add(nextDate).is(":animated")){
- //收起日歷
- nowDate.add(nextDate).slideUp(200);
- //從DOM中刪除日歷結構
- delHtml();
- }
- });
- })
4.1分析下這代碼結構看注解就可以明白的，以下幾個步驟：
1.獲得當前年份，月份（聯動的“點”）
2.獲得左邊和右邊對應月份的天數；
3.獲得左邊和右邊月分當中一號，分別對應的是星期幾
4.有了以上東西，我們就可以創(chuàng)建HTML結構了(因為要根據月份當中的日期排列，來決定，創(chuàng)建五行，還是六行。來顯示日期)
5.將創(chuàng)建好的結構，插入到DOM當中
6.再將獲得的天數，也就是日期數，插入到對應的表格存放日期的TD當中;
五、總結
1.不用把TR分行處理，只接把tbody里面的td做為一個整體的數組，往里面插入數據；（因為顯示的是數字，正好可以和）
2.“聯動”的規(guī)則
3.像這種類似插入很多數據的東西，要用循解決。
4。像這種數據多的，應該先存放到數組中（因為本例顯示的是數字，所以可以直接用循環(huán)里面的變量，如果是值，要先存放到數組中，根據索引取出來）;
原文鏈接：http://www.cnblogs.com/lufy/archive/2012/05/31/2528419.html
【編輯推薦】
