基於jQuery日曆外掛程式製作日曆_jquery
來看下最終效果圖:
是長得醜了一點,不要吐槽我-。 -
首先來說說這個日曆主要的製作邏輯吧:
·一月最多有31天,需要一個7X6的表格去裝載
·如果知道了某個月份1號是星期幾,這個月份有多少天,一個循環就可以顯示某個月的日曆了吧(眼睛都放光了*.*)
·加上一些控制讓使用者可以方便操作(例如可以輸入年份、月份,可以點選選擇年份、月份)
新建一個html文件,html結構:
<div class="container"> <input type="text" value="" id="cal-input"/> <div class="cal-box"> <table> <thead> <tr> <td class="sun">日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td class="sta">六</td> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </div>
再加點樣式進去,打開瀏覽器看看效果:
thead td,tbody td{ width: 20px; height: 20px;<br><span class="styles-clipboard-only"> <span class="webkit-css-property">text-align: <span class="expand-element"><span class="value">center;</span></span></span></span> } thead td.sun,thead td.sta{ color: #eec877; } tbody td{ border: 1px solid #eee; }
看起來還不錯,但是這是一個插件,要寫這麼多html的程式碼是不合理的,應該是在這個插件內部動態插入的,這樣寫也是為了直觀演示。
要開始寫JS代碼了,現在要得知某月的1號是星期幾,方便去遍歷顯示某月的日曆出來,這裡用到了蔡勒公式
PS:簡單解釋一下,蔡勒公式:var week = y + parseInt(y/4) + parseInt(c/4) - 2*c + parseInt(26*(m+1 )/10) + d - 1;
c是年份的前兩位,y是年份的後兩份(2016年,c是20,y就是16),m是月份,d是日期,把week%7後得出的結果就是星期幾
但是1,2月要當成上一年的13,14月進行計算,例如2016.2.3,就要換算成2015.14.3來使用蔡勒公式
week是正數和負數時求模是不一樣的,負數時要 (week%7+7)%7,正數時直接求模 week%7,
還有得知道這月份有多少天,1、3、5、7、8、10、12月是31天,4、6、9、11月是30天,2月分閏年和平年,平年是28天,閏年是29天,閏年是能被4整除但不能被100整除的,好了有了些前提下,還是能很快寫出JS的
$(function(){ var $td = $('tbody').find('td'); var date = new Date(), year = date.getFullYear(), month = date.getMonth() + 1, day = date.getDate(),days; function initCal(yy,mm,dd){ if(mm ==2 && yy%4 == 0 && yy%100 !==0 ){ days = 28; }else if(mm == 1 || mm == 3 || mm == 5 || mm == 7 || mm == 8 || mm == 10 || mm == 12){ days = 31; }else if(mm==4 || mm==6 || mm==9 || mm==11 ){ days = 30; }else{ days = 29; } var m = mm < 3 ? (mm == 1 ? 13 : 14): mm; yy = m > 12 ? yy - 1 : yy; var c = Number(yy.toString().substring(0,2)), y = Number(yy.toString().substring(2,4)), d = 1; //蔡勒公式 var week = y + parseInt(y/4) + parseInt(c/4) - 2*c + parseInt(26*(m+1)/10) + d - 1; week = week < 0 ? (week%7+7)%7 : week%7; for(var i=0 ;i<42;i++){ $td.eq(i).text(''); //清空原来的text文本 } for(var i = 0;i < days; i++){ $td.eq( week % 7 +i).text(i+1); } } initCal(year,month,day); })
再打開瀏覽器看看,現在的行事曆是長這樣
打開手機日曆看一看,現在是16年3月,嗯,長得一毛一樣(得意臉)
現在要加入一些控制進去,兩個輸入框和四個按鍵,按鍵是使用了iconfont,html程式碼如下:
<div class="container"> <input type="text" value="" id="cal-input"/> <div class="cal-box"> <div class="cal-control-box"> <div class="wif iw-bofangqixiayiqu left"></div> <div class="wif iw-iconfont-bofang left"></div> <input type="" value=""/> <span>年</span> <input type="" value=""/> <div class="wif iw-iconfont-bofang right"></div> <div class="wif iw-bofangqixiayiqu right"></div> </div> <table> <thead> <tr> <td class="sun">日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td class="sta">六</td> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div> </div>
現在的日曆是長這樣子了
現在來給按鍵們都綁上點擊事件,輸入框綁上change事件
//更改月份按钮 $(document).on("click",".iw-iconfont-bofang",function(){ if($(this).hasClass("left")){ //判断加还是减 if(month == 1 ){ month = 12; year--; }else{ month--; } }else{ if(month == 12){ month = 1; year ++; }else{ month ++; } } initCal(year,month,day); }) //更改年份 $(document).on("click",".iw-bofangqixiayiqu",function(){ if($(this).hasClass("left")){ year--; }else{ year++; } initCal(year,month,day); }) //年份输入 $(document).on("change","input.cal-year",function(){ year = $(this).val(); initCal(year,month,day); }) //月份输入 $(document).on("change","input.cal-month",function(){ month = $(this).val(); initCal(year,month,day); })
順便在initCal()函數裡面要把年份和月份的值用JQ的val()方法,放進input框裡面就ok啦
結論:這裡呢並沒有寫成一個插件的形式,但是把這個日曆的實現主要思路寫好了,最近也是忙著寫畢業論文,還有挺多東西想寫下來分享的,總是感覺時間不夠用,下次寫一下怎麼將這個日曆寫成一個chrome插件,就是下面這個
希望本文所述對jquery程式設計有所幫助。

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

JavaScript是現代Web開發的基石,它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發,極大地提升了用戶體驗和跨平台開發的靈活性。

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

JavaScript是現代Web開發的核心語言,因其多樣性和靈活性而廣泛應用。 1)前端開發:通過DOM操作和現代框架(如React、Vue.js、Angular)構建動態網頁和單頁面應用。 2)服務器端開發:Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發:通過ReactNative和Electron實現跨平台開發,提高開發效率。

本文展示了與許可證確保的後端的前端集成,並使用Next.js構建功能性Edtech SaaS應用程序。 前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序(一個Edtech應用程序),您可以做同樣的事情。 首先,什麼是多租戶SaaS應用程序? 多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。
