jQuery聯(lián)動日歷的實(shí)例解析
一、要實(shí)現(xiàn)的功能:
1.點(diǎn)擊上面的箭頭,切換至上一個月,或下一個月,并且是聯(lián)動的。
2.只要不是現(xiàn)實(shí)中的當(dāng)月,那么顯示的日期,都是灰色底。
二、分析:
1.當(dāng)我們點(diǎn)擊切換日期的箭頭時,要改變頂部藍(lán)色的年份和日期。
2.當(dāng)我們點(diǎn)擊切換日期的箭頭時,下面TD的日期也要和上面顯示的月份對應(yīng)起來。
3.用一個判斷,是否現(xiàn)實(shí)中的當(dāng)月,來控制TD的背景色,是否為灰色
//點(diǎn)擊更新前一個月 $(".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當(dāng)中 insertTd(); //更新日期標(biāo)題 updateTitle(); }) //點(diǎn)擊下一個月 $(".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當(dāng)中 insertTd(); //更新日期標(biāo)題 updateTitle(); })
以上就是本文的全部內(nèi)容,希望對大家有所幫助,謝謝對腳本之家的支持!
相關(guān)文章
jquery動態(tài)添加刪除一行數(shù)據(jù)示例
這篇文章主要介紹了jquery如何動態(tài)添加刪除一行數(shù)據(jù),需要的朋友可以參考下2014-06-06讓jQuery與其他JavaScript庫并存避免沖突的方法
為了解決jQuery和其他JavaScript庫中$()函數(shù)的沖突,需要取消jQuery的$()函數(shù),下面有個不錯的方法,感興趣的朋友可以參考下2013-12-12基于PHP和Mysql相結(jié)合使用jqGrid讀取數(shù)據(jù)并顯示
jqGrid可以動態(tài)讀取和加載外部數(shù)據(jù),本文將結(jié)合PHP和Mysql給大家講解如何使用jqGrid讀取數(shù)據(jù)并顯示,以及可以通過輸入關(guān)鍵字查詢數(shù)據(jù)的ajax交互過程2015-12-12JQuery獲取鼠標(biāo)進(jìn)入和離開容器的方向
本文主要分享了基于JQuery的獲取鼠標(biāo)進(jìn)入和離開容器方向的實(shí)現(xiàn)代碼,具有一定的參考價(jià)值。下面跟著小編一起來看下吧2016-12-12JQueryEasyUI框架下的combobox的取值和綁定的方法
這篇文章主要介紹了JQueryEasyUI框架下的combobox的取值和綁定的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-01-01jQuery的時間datetime控件在AngularJs中的使用實(shí)例(分享)
下面小編就為大家?guī)硪黄猨Query的時間datetime控件在AngularJs中的使用實(shí)例(分享)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08