<div> <input type="text" value=""/> <div> <div> <div></div> <div></div> <input type="" value=""/> <span>年</span> <input type="" value=""/> <div></div> <div></div> </div> <table> <thead> <tr> <td>日</td> <td>一</td> <td>二</td> <td>三</td> <td>四</td> <td>五</td> <td>六</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插件，就是下面这个
