使用Jquery实现每日签到功能

基于jquery实现日历签到功能

jquery记事日历插件e-calendar

思路：1、获取当月第一天是周几2、获取当月共几天

通过获取下月的第0天，即是当月最后一天日期3、通过二维数组构造当月日历4、将获取到的日期第一天在日历中展示..

知识点：1、JS获取当月的天数

getDate() 方法可返回月份的某一天，返回值是1 ~ 31之间的一个整数。var d = newDate()

document.write(d.getDate())

输出：17getDay() 方法可返回表示星期的某一天的数字，返回值是0(周日) 到 6(周六) 之间的一个整数。var d=newDate()

document.write(d.getDay())

输出：3

var d = newDate();//d.getMonth()+1代表下个月，月份索引从0开始，即当前月为6月时，getMonth()返回值为5，创建日期时同理

//此处构造的日期为下个月的第0天，天数索引从1开始，第0天即代表上个月的最后一天

var curMonthDays = new Date(d.getFullYear(), (d.getMonth()+1), 0).getDate();

alert("本月共有 "+ curMonthDays +" 天");2、构造当月日历二维数组

Js代码 收藏代码

bulidCal :function(iYear, iMonth) {var aMonth = newArray();

aMonth[0] = new Array(7);

aMonth[1] = new Array(7);

aMonth[2] = new Array(7);

aMonth[3] = new Array(7);

aMonth[4] = new Array(7);

aMonth[5] = new Array(7);

aMonth[6] = new Array(7);var dCalDate = new Date(iYear, iMonth - 1, 1);var iDayOfFirst =dCalDate.getDay();var iDaysInMonth =calUtil.getDaysInmonth(iMonth, iYear);var iVarDate = 1;vard, w;

aMonth[0][0] = "日";

aMonth[0][1] = "一";

aMonth[0][2] = "二";

aMonth[0][3] = "三";

aMonth[0][4] = "四";

aMonth[0][5] = "五";

aMonth[0][6] = "六";for (d = iDayOfFirst; d < 7; d++) {

aMonth[1][d] =iVarDate;

iVarDate++;

}for (w = 2; w < 7; w++) {for (d = 0; d < 7; d++) {if (iVarDate <=iDaysInMonth) {

aMonth[w][d]=iVarDate;

iVarDate++;

}

}

}returnaMonth;

}

获取当月第一天是周几：

Js代码 收藏代码var dCalDate = new Date(iYear, iMonth - 1, 1);var iDayOfFirst =dCalDate.getDay();

获取当月共几天：

Js代码 收藏代码

getDaysInmonth :function(iMonth, iYear){var dPrevDate = new Date(iYear, iMonth, 0);returndPrevDate.getDate();

}3、构造当月日历HTML

Js代码 收藏代码

drawCal :function(iYear, iMonth ,signList) {var myMonth =calUtil.bulidCal(iYear, iMonth);var htmls = newArray();

htmls.push("

");return htmls.join('');

}4、控件的事件处理机制

指定一个默认的eventName:"load"，不同的事件定义不同的eventName

默认时：

Js代码 收藏代码

eventName:"load",//初始化日历

init:function(signList){

calUtil.setMonthAndDay();

calUtil.draw(signList);

calUtil.bindEnvent();

},

Java代码 收藏代码

setMonthAndDay:function(){switch(calUtil.eventName)

{case "load":var current = newDate();

calUtil.showYear=current.getFullYear();

calUtil.showMonth=current.getMonth() + 1;break;case "prev":var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];

calUtil.showMonth=parseInt(nowMonth)-1;if(calUtil.showMonth==0)

{

calUtil.showMonth=12;

calUtil.showYear-=1;

}break;case "next":var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];

calUtil.showMonth=parseInt(nowMonth)+1;if(calUtil.showMonth==13)

{

calUtil.showMonth=1;

calUtil.showYear+=1;

}break;

}

},

不同的事件触发：

Js代码 收藏代码

bindEnvent:function(){//绑定上个月事件

$(".calendar_month_prev").click(function(){//ajax获取日历json数据

var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];

calUtil.eventName="prev";

calUtil.init(signList);

});//绑定下个月事件

$(".calendar_month_next").click(function(){//ajax获取日历json数据

var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];

calUtil.eventName="next";

calUtil.init(signList);

});

}

效果图：

页面引用：

Html代码 收藏代码

签到效果实现

var signList=[{"signDay":"09"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];

calUtil.init(signList);

});

JS：

Js代码 收藏代码var calUtil ={//当前日历显示的年份

showYear:2015,//当前日历显示的月份

showMonth:1,//当前日历显示的天数

showDays:1,

eventName:"load",//初始化日历

init:function(signList){

calUtil.setMonthAndDay();

calUtil.draw(signList);

calUtil.bindEnvent();

},

draw:function(signList){//绑定日历

var str =calUtil.drawCal(calUtil.showYear,calUtil.showMonth,signList);

$("#calendar").html(str);//绑定日历表头

var calendarName=calUtil.showYear+"年"+calUtil.showMonth+"月";

$(".calendar_month_span").html(calendarName);

},//绑定事件

bindEnvent:function(){//绑定上个月事件

$(".calendar_month_prev").click(function(){//ajax获取日历json数据

var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];

calUtil.eventName="prev";

calUtil.init(signList);

});//绑定下个月事件

$(".calendar_month_next").click(function(){//ajax获取日历json数据

var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];

calUtil.eventName="next";

calUtil.init(signList);

});

},//获取当前选择的年月

setMonthAndDay:function(){switch(calUtil.eventName)

{case "load":var current = newDate();

calUtil.showYear=current.getFullYear();

calUtil.showMonth=current.getMonth() + 1;break;case "prev":var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];

calUtil.showMonth=parseInt(nowMonth)-1;if(calUtil.showMonth==0)

{

calUtil.showMonth=12;

calUtil.showYear-=1;

}break;case "next":var nowMonth=$(".calendar_month_span").html().split("年")[1].split("月")[0];

calUtil.showMonth=parseInt(nowMonth)+1;if(calUtil.showMonth==13)

{

calUtil.showMonth=1;

calUtil.showYear+=1;

}break;

}

},

getDaysInmonth :function(iMonth, iYear){var dPrevDate = new Date(iYear, iMonth, 0);returndPrevDate.getDate();

},

bulidCal :function(iYear, iMonth) {var aMonth = newArray();

aMonth[0] = new Array(7);

aMonth[1] = new Array(7);

aMonth[2] = new Array(7);

aMonth[3] = new Array(7);

aMonth[4] = new Array(7);

aMonth[5] = new Array(7);

aMonth[6] = new Array(7);var dCalDate = new Date(iYear, iMonth - 1, 1);var iDayOfFirst =dCalDate.getDay();var iDaysInMonth =calUtil.getDaysInmonth(iMonth, iYear);var iVarDate = 1;vard, w;

aMonth[0][0] = "日";

aMonth[0][1] = "一";

aMonth[0][2] = "二";

aMonth[0][3] = "三";

aMonth[0][4] = "四";

aMonth[0][5] = "五";

aMonth[0][6] = "六";for (d = iDayOfFirst; d < 7; d++) {

aMonth[1][d] =iVarDate;

iVarDate++;

}for (w = 2; w < 7; w++) {for (d = 0; d < 7; d++) {if (iVarDate <=iDaysInMonth) {

aMonth[w][d]=iVarDate;

iVarDate++;

}

}

}returnaMonth;

},

ifHasSigned :function(signList,day){var signed = false;

$.each(signList,function(index,item){if(item.signDay ==day) {

signed= true;return false;

}

});returnsigned ;

},

drawCal :function(iYear, iMonth ,signList) {var myMonth =calUtil.bulidCal(iYear, iMonth);var htmls = newArray();

htmls.push("

");return htmls.join('');

}

};