jQuery聯(lián)動(dòng)日歷的實(shí)例解析
一、要實(shí)現(xiàn)的功能：
1.點(diǎn)擊上面的箭頭，切換至上一個(gè)月，或下一個(gè)月，并且是聯(lián)動(dòng)的。
2.只要不是現(xiàn)實(shí)中的當(dāng)月，那么顯示的日期，都是灰色底。
二、分析：
1.當(dāng)我們點(diǎn)擊切換日期的箭頭時(shí)，要改變頂部藍(lán)色的年份和日期。
2.當(dāng)我們點(diǎn)擊切換日期的箭頭時(shí)，下面TD的日期也要和上面顯示的月份對(duì)應(yīng)起來(lái)。
3.用一個(gè)判斷，是否現(xiàn)實(shí)中的當(dāng)月，來(lái)控制TD的背景色，是否為灰色
//點(diǎn)擊更新前一個(gè)月
$(".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)擊下一個(gè)月
$(".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();
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家有所幫助，謝謝對(duì)腳本之家的支持！
相關(guān)文章
基于jQuery和CSS3制作數(shù)字時(shí)鐘附源碼下載(jquery篇)
本篇文章基于jquery讓數(shù)字時(shí)鐘真正的跑起來(lái)，實(shí)現(xiàn)一個(gè)帶有日期和星期的網(wǎng)頁(yè)版數(shù)字時(shí)鐘，效果非常逼真，感興趣的朋友一起看看吧2015-11-11
jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋
一個(gè)輕量級(jí)的cookie 插件，可以讀取、寫(xiě)入、刪除 cookie。這篇文章主要介紹了jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋,需要的朋友可以參考下2017-03-03
jQuery+css3實(shí)現(xiàn)轉(zhuǎn)動(dòng)的正方形效果(附demo源碼下載)
這篇文章主要介紹了jQuery+css3實(shí)現(xiàn)轉(zhuǎn)動(dòng)的正方形效果,可實(shí)現(xiàn)圖片組集體轉(zhuǎn)動(dòng)的功能,通過(guò)jQuery結(jié)合時(shí)間函數(shù)定時(shí)操作css3屬性實(shí)現(xiàn)旋轉(zhuǎn)效果,并附帶demo源碼供讀者下載,需要的朋友可以參考下2016-01-01
jQuery頁(yè)面彈出框?qū)崿F(xiàn)文件上傳
這篇文章主要為大家詳細(xì)介紹了jQuery頁(yè)面彈出框?qū)崿F(xiàn)文件上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
JQuery上手簡(jiǎn)單，也很容易學(xué)，即使是剛接觸JQuery的開(kāi)發(fā)人員，借助JQuery手冊(cè)，也很快能在項(xiàng)目中使用開(kāi)發(fā)，這篇文章針對(duì)jquery原理以及學(xué)習(xí)技巧進(jìn)行介紹，感興趣的小伙伴們可以參考一下2015-11-11
jQuery使用deferreds串行多個(gè)ajax請(qǐng)求
這篇文章主要介紹了jQuery使用deferreds串行多個(gè)ajax請(qǐng)求的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
jQuery Ajax實(shí)現(xiàn)Select多級(jí)關(guān)聯(lián)動(dòng)態(tài)綁定數(shù)據(jù)的實(shí)例代碼
這篇文章主要介紹了jQuery Ajax實(shí)現(xiàn)Select多級(jí)關(guān)聯(lián)動(dòng)態(tài)綁定數(shù)據(jù)的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
jQuery實(shí)現(xiàn)的導(dǎo)航條點(diǎn)擊后高亮顯示功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的導(dǎo)航條點(diǎn)擊后高亮顯示功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-03-03
多功能jQuery樹(shù)插件zTree實(shí)現(xiàn)權(quán)限列表簡(jiǎn)單實(shí)例
這篇文章主要介紹了多功能jQuery樹(shù)插件zTree實(shí)現(xiàn)權(quán)限列表簡(jiǎn)單實(shí)例，優(yōu)異的性能、靈活的配置、多種功能的組合，是樹(shù)插件zTree最大的優(yōu)勢(shì)，感興趣的小伙伴們可以參考一下2016-07-07
這篇文章主要為大家詳細(xì)介紹了jQuery內(nèi)存泄露解決辦法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12