来看下最终效果图吧：
是长得丑了一点，不要吐槽我-。-
首先来说说这个日历主要的制作逻辑吧：
·一个月份最多有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 "text-align: center">
打开手机日历看一看，现在是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程序设计有所帮助。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。