基于JavaScript实现每日签到打卡轨迹功能

var calUtil = {
 //当前日历显示的年份
 showYear:2018,
 //当前日历显示的月份
 showMonth:1,
 //当前日历显示的天数
 showDays:1,
 eventName:\"load\",
 //初始化日历
 init:function(signList){
  calUtil.setMonthAndDay();
  calUtil.draw(signList);
  
 },
 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); 
 },
 //获取当前选择的年月
 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(\"<div class=\'sign_main\' id=\'sign_ \'>\");
  htmls.push(\"<div class=\'sign_succ_calendar_ \'>\");
  htmls.push(\"<div class=\'calendar_month_span\'></div>\");
  htmls.push(\"</div>\");
  htmls.push(\"<div class=\'sign\' id=\'sign_cal\'>\");
  htmls.push(\"<table>\");
  var d, w;
  for (w = 1; w < 7; w++) {
  htmls.push(\"<tr>\");
  for (d = 0; d < 7; d++) {
   var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]);
   console.log(ifHasSigned);
   if(ifHasSigned){
   htmls.push(\"<td class=\'on\'>\" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : \" \") + \"</td>\");
   } else {
   htmls.push(\"<td>\" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : \" \") + \"</td>\");
   }
  }
  htmls.push(\"</tr>\");
  }
  htmls.push(\"</table>\");
  htmls.push(\"</div>\");
  htmls.push(\"</div>\");
  return htmls.join(\'\');
 }
};

<  src=\"jquery.min.js\"></ >
<  src=\"~calendar.js\"></ >

var signList=[{\"signDay\":\"23\"},{\"signDay\":\"24\"},{\"signDay\":\"25\"},{\"signDay\":\"26\"},{\"signDay\":\"30\"}]; 
//填充到日历表格中
calUtil.init(signList);