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

时间：2022-06-25 15:27:54 编辑：袖梨来源：一聚教程网

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

1. 核心文件 calendar.js

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

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("");
  var d, w;
  for (w = 1; w < 7; w++) {
  htmls.push("");
  for (d = 0; d < 7; d++) {
   var ifHasSigned = calUtil.ifHasSigned(signList,myMonth[w][d]);
   console.log(ifHasSigned);
   if(ifHasSigned){
   htmls.push("");
   } else {
   htmls.push("");
   }
  }
  htmls.push("");
  }
  htmls.push("<table><tbody><tr><td class="on">" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td><td>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</td></tr></tbody></table>");
  htmls.push("</div>");
  htmls.push("</div>");
  return htmls.join('');
 }
};

2. 页面Js引入

1 2	`<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. 效果图

推荐专题

最新下载

热门教程

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

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程