本文主要和大家分享jQuery实现日历每日签到网页特效，主要以代码的形式和大家分享，希望能帮助到大家。

index.html

代码：

jQuery简洁的日历签到插件

$(function(){

//ajax获取日历json数据

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

calUtil.init(signList);

});

*规则：本月签到21天即可领取奖品

calendar2.jsvar calUtil = {

//当前日历显示的年份

showYear:2015,

//当前日历显示的月份

showMonth:1,

//当前日历显示的天数

showDays:1,

eventName:"load",

//初始化日历

init:function(signList,s=''){

calUtil.setMonthAndDay();

if (typeof(s) == 'undefined'){

}else{

signList.splice('','',s);

}

calUtil.draw(signList);

calUtil.bindEnvent(signList);

},

draw:function(signList){

//绑定日历

//alert(signList.length);

console.log(signList);

if(signList.length > 21){

//alert(21);

$("#sign_note").empty();

$("#sign_note").html(' 已达标，获取1次抽奖');

}

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(signList){

// //绑定上个月事件

// $(".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);

// });

$(".calendar_record").click(function(){

//ajax获取日历json数据

//alert(typeof(signList)+"yxy");

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

//var tmp = {"signDay":$(this).html()};

//if (typeof(signList) == 'undefined'){

//不做处理

//}else{

// signList.splice('','',tmp);

// console.log(signList);

// calUtil.init(signList);

// }

//alert($(this).html());

var tmp = {"signDay":$(this).html()};

calUtil.init(signList,tmp);

});

},

//获取当前选择的年月

setMonthAndDay:function(){

switch(calUtil.eventName)

{

case "load":

var current = new Date();

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

return dPrevDate.getDate();

},

bulidCal : function(iYear, iMonth) {

var aMonth = new Array();

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;

var d, 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++;

}

}

}

return aMonth;

},

ifHasSigned : function(signList,day){

var signed = false;

$.each(signList,function(index,item){

if(item.signDay == day) {

signed = true;

return false;

}

});

return signed ;

},

drawCal : function(iYear, iMonth ,signList) {

var myMonth = calUtil.bulidCal(iYear, iMonth);

var htmls = new Array();

htmls.push("

");

htmls.push("

");

//htmls.push("

下月

");

//htmls.push("

上月

");

htmls.push("

htmls.push("

");

htmls.push("

");

htmls.push("

");

htmls.push("

" + myMonth[0][0] + "

");

htmls.push("

" + myMonth[0][1] + "

");

htmls.push("

" + myMonth[0][2] + "

");

htmls.push("

" + myMonth[0][3] + "

");

htmls.push("

" + myMonth[0][4] + "

");

htmls.push("

" + myMonth[0][5] + "

");

htmls.push("

" + myMonth[0][6] + "

");

htmls.push("

");

var d, w;

for (w = 1; w < 6; w++) {

htmls.push("

");

for (d = 0; d < 7; d++) {

var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]);

console.log("001:"+ifHasSigned);

if(ifHasSigned && typeof(myMonth[w][d]) != 'undefined'){

htmls.push("

" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "

");

} else {

htmls.push("

" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "

");

}

}

htmls.push("

");

}

htmls.push("

");

htmls.push("

");

htmls.push("

");

return htmls.join('');

}

};

sign2.css.singer_r_img {

display: block;

line-height: 45px;

background: url(../images/sing_week.gif) right 2px no-repeat;

vertical-align: middle;

margin-bottom: -10px;

text-decoration: none;

}

.singer_r_img:hover {

background-position: right -53px;

text-decoration: none;

}

.singer_r_img span {

margin-left: 14px;

font-size: 16px;

font-family: 'Hiragino Sans GB','Microsoft YaHei',sans-serif !important;

font-weight: 700;

color: #165379;

}

.singer_r_img.current {

background: url(images/sing_sing.gif) no-repeat 0 2px;

border: 0;

text-decoration: none;

}

.sign_succ_calendar_title {

text-align: center;

/*width: 398px;*/

border-left: 1px solid #e3e3e3;

border-right: 1px solid #e3e3e3;

background: #fff;

}

.sign_main {

/*width: 400px;*/

/**background-color: #FBFEFE;**/

border-top: 1px solid #e3e3e3;

font-family: "Microsoft YaHei",SimHei;

display: block;

}

.calendar_month_span {

display: inline;

line-height: 40px;

font-size: 16px;

color: #656565;

letter-spacing: 2px;

font-weight: bold;

}

.sign_equal {

display:table;

border-collapse:separate;

width: 100%;

}

.sign_row {

display:table-row;

}

.sign_row p {

display:table-cell;

width:14.3%;

border-top: 1px solid #e3e3e3;

/*border-bottom: 1px solid #e3e3e3;*/

border-left: 1px solid #e3e3e3;

height: 40px;

text-align: center;

line-height: 40px;

}

.sign_row .bold{

font-weight: bold;

}

.sign_row p:last-child {

border-right: 1px solid #e3e3e3;

}

.sign_equal .sign_row:last-child p{

border-bottom: 1px solid #e3e3e3;

}

.sign_equal .on {

background: url(../images/sign_have.gif) no-repeat center;

}

.sign_contener,.sign_contener:visited {

line-height: 30px;

background: #00a0e9;

border: none;

color: white;

border-radius: 30px;

padding: 0 10px;

font-size: 16px;

}

.sign_contener:hover{

background-color: red;

}

相关推荐：