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

本文实例为大家分享了js实现每日签到打卡轨迹功能的具体代码，供大家参考，具体内容如下

1. 核心文件 calendar.js 

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_layer'>");
  htmls.push("<div class='sign_succ_calendar_title'>");
  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('');
 }
};

2. 页面js引入

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

3.0 后台拉取会员已经签到的打卡轨迹，填充到表格中去。 

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

4. 效果图

 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。