jQuery简单入门的日历签到插件

新建html文档。

书写html文档。

书写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 div { 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 div:last-child { border-right: 1px solid #e3e3e3; }.sign_equal .sign_row:last-child div { 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; }

书写js。

书写并引用calendar2.js。var 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){    console.log(signList);    if(signList.length > 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_record").click(function(){    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("