基于jQuery日歷插件制作日歷

2019-11-20 10:24:27

字體：大中小

來(lái)源：轉(zhuǎn)載

供稿：網(wǎng)友

來(lái)看下最終效果圖吧：

是長(zhǎng)得丑了一點(diǎn)，不要吐槽我-。-

首先來(lái)說(shuō)說(shuō)這個(gè)日歷主要的制作邏輯吧：

?一個(gè)月份最多有31天，需要一個(gè)7X6的表格去裝載

?如果知道了某個(gè)月份1號(hào)是星期幾，這個(gè)月份有多少天，一個(gè)循環(huán)就可以顯示某個(gè)月的日歷了吧（眼睛都放光了*.*）

?加上一些控件讓用戶可以方便操作吧（比如可以輸入年份、月份，可以點(diǎn)擊選擇年份、月份）

新建一個(gè)html文件，html結(jié)構(gòu)：

<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>

再加點(diǎn)樣式進(jìn)去，打開(kāi)瀏覽器看看效果：

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; }

看起來(lái)還不錯(cuò)，但是這是一個(gè)插件，要寫(xiě)這么多html的代碼是不合理的，應(yīng)該是在這個(gè)插件內(nèi)部動(dòng)態(tài)插入的，這樣寫(xiě)也是為了直觀演示。

要開(kāi)始寫(xiě)JS代碼了，現(xiàn)在要得知某月的1號(hào)是星期幾，方便去遍歷顯示某月的日歷出來(lái)，這里用到了蔡勒公式

PS：簡(jiǎn)單解釋一下，蔡勒公式：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后得出的結(jié)果就是星期幾
但是1,2月要當(dāng)成上一年的13,14月進(jìn)行計(jì)算，比如2016.2.3，就要換算成2015.14.3來(lái)使用蔡勒公式

week是正數(shù)和負(fù)數(shù)時(shí)求模是不一樣的，負(fù)數(shù)時(shí)要 (week%7+7)%7，正數(shù)時(shí)直接求模 week%7，

還有得知道這個(gè)月份有多少天，1、3、5、7、8、10、12月是31天，4、6、9、11月是30天，2月分閏年和平年，平年是28天，閏年是29天，閏年是能被4整除但不能被100整除的，好了有了些前提下，還是能很快寫(xiě)出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('');　　　　//清空原來(lái)的text文本  }   for(var i = 0;i < days; i++){  $td.eq( week % 7 +i).text(i+1);　　　　  } }  initCal(year,month,day); })

　　再打開(kāi)瀏覽器看看，現(xiàn)在的日歷是長(zhǎng)這樣

打開(kāi)手機(jī)日歷看一看，現(xiàn)在是16年3月，嗯，長(zhǎng)得一毛一樣（得意臉）

現(xiàn)在要添加一些控件進(jìn)去,兩個(gè)輸入框和四個(gè)按鍵,按鍵是使用了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>

現(xiàn)在的日歷是長(zhǎng)這樣子了

現(xiàn)在來(lái)給按鍵們都綁上點(diǎn)擊事件,輸入框綁上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()函數(shù)里面要把年份和月份的值用JQ的val()方法，放進(jìn)input框里面就ok啦

結(jié)束語(yǔ)：這里呢并沒(méi)有寫(xiě)成一個(gè)插件的形式，但是把這個(gè)日歷的實(shí)現(xiàn)主要思路寫(xiě)好了，最近也是忙著寫(xiě)畢業(yè)論文，還有挺多東西想寫(xiě)下來(lái)分享的，總是感覺(jué)時(shí)間不夠用，下次寫(xiě)一下怎么將這個(gè)日歷寫(xiě)成一個(gè)chrome插件，就是下面這個(gè)