1.

参考文档：https://blog.csdn.net/qq_38137411/article/details/81319299

2.

##实现后的效果图拿三张效果图进行对比，用户如已打卡当天的日期背景颜色则会显示为蓝色累计打卡取已打卡数组长度就好连续打卡则取数组中的第二位与第一位进行对比，如时间未超过24小时，则记一次打卡，以此类推

3.

代码xml

!--打卡日历页面--viewclass"continuouspunching_style"!--累计打卡次数--viewclass"clockfrequency_view_style"viewclass"daka_info"viewclass"daka_tiansu"textclass"daka_number_style"{{count}}/text天/viewviewclass"daka_jiesao"累计打卡/view/viewviewclass"daka_info"viewclass"daka_tiansu"textclass"daka_number_style"{{continuous_daka_count}}/text天/viewviewclass"daka_jiesao"连续打卡/view/view/view!--累计打卡次数end--!--日历--viewclass'all'viewclass"bar"!--显示年月--viewclass"date"viewclass"sanjiao"bindtap"handleCalendar"data-handle"prev"/view{{cur_year||"--"}}年{{cur_month||"--"}}月viewclass"you_sanjiao"bindtap"handleCalendar"data-handle"next"/view/view/view!--显示星期--viewclass"week"viewwx:for"{{weeks_ch}}"wx:key"{{index}}"data-idx"{{index}}"{{item}}/view/viewviewclass'days'!--列--viewclass"columns"wx:for"{{days.length/7}}"wx:for-index"i"wx:key"i"viewwx:for"{{days}}"wx:for-index"j"wx:key"j"!--行--viewclass"rows"wx:if"{{j/7i}}"viewclass"rows"wx:for"{{7}}"wx:for-index"k"wx:key"k"!--每个月份的空的单元格--viewclass'cell'wx:if"{{days[j+k].datenull}}"textdecode"{{true}}"/text/view!--每个月份的有数字的单元格--viewclass'cell'wx:else!--当前日期已签到--viewwx:if"{{days[j+k].isSigntrue}}"style'background-color:#2681FF;color:white;'class'cell'text{{days[j+k].date}}/text/view!--当前日期未签到--viewwx:elsetext{{days[j+k].date}}/text/view/view/view/view/view/view/view/view!--日历end--!--打卡来历--viewclass"introduce"viewclass"introduce-top"viewclass"introduce-top-left"viewstyle"display:flex;flex-direction:row;"textstyle"font-size:33rpx;font-weight:900;"班级签到打卡/textviewclass"introduceClock"text第一天打卡/text/view/viewviewtextclass"thefont"签到打卡时间:/texttextclass"thefont"style"color:#4875d8;"8月10日-9月10日/text/viewviewtextclass"thefont"参与人数:100人次/text/view/viewviewclass"introduce-top-right"imageclass"top-right"src"../images/backImage.png"/image/view/viewviewstyle"border-top:2rpxdashed#cdcdcd;margin-top:30rpx;"/viewviewclass"introduce-bottom"textstyle"font-size:33rpx;font-weight:700;"!您有2个主题未打卡/texttextstyle"font-size:33rpx;font-weight:700;color:#4875d8;"点击查看/text/view/view!--打卡来历end--/view4.

css

/*pages/Calendar/Calendar.wxss*//*打卡日历*/page{background-color:#F4F4F4;}.all{width:92%;box-shadow:05px8px-1pxrgba(175,171,171,0.2);padding-top:20rpx;border-radius:20rpx;position:absolute;top:225rpx;left:30rpx;background-color:white;}.all.bar{display:flex;flex-direction:row;justify-content:space-between;padding:10rpx;}.all.barimage{width:50rpx;height:50rpx;}.all.week{display:flex;flex-direction:row;justify-content:space-between;padding:20rpx;padding-left:40rpx;padding-right:40rpx;border-radius:10px;color:#2681FF;margin:20rpx;font-size:30rpx;}.all.days{margin:20rpx;padding:10rpx;border-radius:10px;font-size:30rpx;}.all.columns{display:flex;flex-direction:column;justify-content:space-between;}.all.columns.rows{display:flex;flex-direction:row;justify-content:space-between;}.all.columns.rows.cell{width:84rpx;height:88rpx;margin:3rpx;text-align:center;border-radius:50%;display:flex;flex-direction:column;justify-content:center;}.count.daynumber{display:flex;flex-direction:row;justify-content:center;}.count.daynumber.day{margin-top:50rpx;}.continuouspunching_style{background-image:url('https://i.loli.net/2019/10/18/C9cPfSnrMUmqxz8.png');width:100%;background-size:100%auto;margin-top:-130rpx;}.continuouspunching_style::before{content:"";display:block;padding-top:100%;}.clockfrequency_view_style{width:77%;display:flex;justify-content:space-between;align-items:center;text-align:center;position:absolute;top:62rpx;left:95rpx;}.daka_info{color:white;line-height:65rpx;letter-spacing:5rpx;}.daka_jiesao{opacity:0.8;font-size:30rpx;}.daka_number_style{font-size:60rpx;}.date{display:flex;justify-content:flex-start;align-items:center;font-size:38rpx;font-weight:500;color:rgba(51,51,51,1);margin:0pxauto;}.sanjiao{width:0;height:0;border-top:9pxsolidtransparent;border-right:12pxsolid#2681FF;border-bottom:9pxsolidtransparent;margin-right:20rpx;}.you_sanjiao{width:0;height:0;border-top:9pxsolidtransparent;border-left:12pxsolid#ccc;border-bottom:9pxsolidtransparent;margin-left:20rpx;}.introduce{width:90%;margin:0rpxauto;padding-top:20rpx;background-color:white;border-radius:20rpx;position:relative;top:347rpx;box-shadow:05px8px-1pxrgba(175,171,171,0.2);margin-bottom:100rpx;}.introduce-top{width:90%;margin:0rpxauto;display:flex;justify-content:space-between;}.introduceClock{padding:0rpx10rpx;height:45rpx;border-radius:20rpx;background-color:#4875d8;color:white;font-size:24rpx;font-weight:900;text-align:center;line-height:45rpx;margin-left:10rpx;}.thefont{font-size:22rpx;font-weight:500;color:#cdcdcd;}.top-right{width:135rpx;height:135rpx;margin:12.5rpxauto;}.introduce-bottom{width:90%;margin:0rpxauto;line-height:80rpx;display:flex;justify-content:space-between;}5.

js

//打卡日历页面varutilrequire('../../utils/util.js');Page({/***页面的初始数据*/data:{days:[],//存放一个月的天数数组signUp:[],//用户判断当天是否已打卡可废除下方模拟打卡数组直接采用此数组//用于判断cur_year:0,//年cur_month:0,//月count:0,//累计打卡的数量continuous_daka_count:0,//连续打卡次数//monthArr:[],//模拟打卡状态的数组dakaArr:['2019/09/110:33:34','2019/09/510:33:34','2019/10/110:33:34','2019/10/510:33:34','2019/10/710:33:34','2019/10/810:33:34','2019/10/910:33:34','2019/10/1010:33:34','2019/10/1110:33:34','2019/10/1310:33:34','2019/10/1410:33:34','2019/10/1510:33:34','2019/10/1610:33:34','2019/10/1710:33:34','2019/10/1810:33:34','2019/10/1910:33:34'],},/***生命周期函数--监听页面加载*/onLoad:function(options){//获取当前年月constdatenewDate();var_cur_yeardate.getFullYear();var_cur_monthdate.getMonth()+1;var_weeks_ch['日','一','二','三','四','五','六'];this.setData({cur_year:_cur_year,cur_month:_cur_month,weeks_ch:_weeks_ch,})this.calculateEmptyGrids(this.data.cur_year,this.data.cur_month);//计算当月1号前空了几个格子，把它填充在days数组的前面this.calculateDays(this.data.cur_year,this.data.cur_month);//绘制当月天数占的格子，并把它放到days数组中//获取当前用户当前任务的人签到状态this.onGetSignUp();console.log("年》"+this.data.cur_year+"月》"+this.data.cur_month);},/***生命周期函数--监听页面初次渲染完成*/onReady:function(){},/***生命周期函数--监听页面显示*/onShow:function(){},/***生命周期函数--监听页面隐藏*/onHide:function(){},/***生命周期函数--监听页面卸载*/onUnload:function(){},/***页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh:function(){},/***页面上拉触底事件的处理函数*/onReachBottom:function(){},/***用户点击右上角分享*/onShareAppMessage:function(){},//获取当月共多少天getThisMonthDays:function(year,month){returnnewDate(year,month,0).getDate()},//获取当月第一天星期几getFirstDayOfWeek:function(year,month){returnnewDate(Date.UTC(year,month-1,1)).getDay();},//计算当月1号前空了几个格子，把它填充在days数组的前面calculateEmptyGrids:function(year,month){varthatthis;//计算每个月时要清零that.setData({days:[],});constfirstDayOfWeekthis.getFirstDayOfWeek(year,month);if(firstDayOfWeek0){for(leti0;ifirstDayOfWeek;i++){varobj{date:null,isSign:false}that.data.days.push(obj);}this.setData({days:that.data.days,});//清空}else{this.setData({days:[]});}},////用于显示打卡状态只需加载一次//onShowsPunchStatus(_month){//varthatthis;//let_daysthat.data.days;//let_arrthat.data.monthArr;//if(that.data.monthArr.length1){//_arr.push({//month:_month,//days:_days//});//that.setData({//monthArr:_arr//})//}else{//var_monthArrthat.data.monthArr;//for(vari0;i_monthArr.length;i++){//for(varj0;j_days.length;j++){//if(_days[j].isSign_monthArr[i].month!_month){//console.log("进来添加");//_monthArr.push({//month:_month,//days:_days//});//that.setData({//monthArr:_monthArr,//})//}//}//}//}//},//绘制当月天数占的格子，并把它放到days数组中calculateDays:function(year,month){varthatthis;constthisMonthDaysthis.getThisMonthDays(year,month);for(leti1;ithisMonthDays;i++){varobj{date:i,isSign:false}that.data.days.push(obj);}this.setData({days:that.data.days});},//匹配判断当月与当月哪些日子签到打卡onJudgeSign(){varthatthis;varsignsthat.data.signUp;vardaysArrthat.data.days;for(vari0;isigns.length;i++){varcurrentnewDate(signs[i].replace(/-/g,"/"));varyearcurrent.getFullYear();varmonthcurrent.getMonth()+1;vardaycurrent.getDate();dayparseInt(day);for(varj0;jdaysArr.length;j++){//年月日相同并且已打卡if(yearthat.data.cur_yearmonththat.data.cur_monthdaysArr[j].dateday){daysArr[j].isSigntrue;}}}that.setData({days:daysArr});that.onJudgeContinuousClock();},//判断连续打卡次数onJudgeContinuousClock(){varthatthis;let_count0;for(vari0;ithat.data.dakaArr.length;i++){//把时间转换为时间戳if(i!0){varnewDate_Date.parse(that.data.dakaArr[i]);//当天vartheOriginalTime_Date.parse(that.data.dakaArr[i-1]);//前一天//计算天let_dayparseInt(newDate_-theOriginalTime_)/(1000*60*60);//console.log("当天："+that.data.dakaArr[i]+",前一天："+that.data.dakaArr[i-1]+"，当天与前天比较相差时间"+_day+",累计打卡"+_count);if(_day24){_count+1;}else{_count0;}}}if(_count!0){that.setData({continuous_daka_count:parseInt(_count+1),})}else{that.setData({continuous_daka_count:0,})}},//切换控制年月，上一个月，下一个月handleCalendar:function(e){varthatthis;consthandlee.currentTarget.dataset.handle;constcur_yearthat.data.cur_year;constcur_monththat.data.cur_month;if(handle'prev'){letnewMonthcur_month-1;letnewYearcur_year;if(newMonth1){newYearcur_year-1;newMonth12;}this.setData({cur_year:newYear,cur_month:newMonth})this.calculateEmptyGrids(newYear,newMonth);this.calculateDays(newYear,newMonth);this.onGetSignUp();}else{letnewMonthcur_month+1;letnewYearcur_year;if(newMonth12){newYearcur_year+1;newMonth1;}this.setData({cur_year:newYear,cur_month:newMonth})this.calculateEmptyGrids(newYear,newMonth);this.calculateDays(newYear,newMonth);this.onGetSignUp();}},//获取当前用户该任务的签到数组onGetSignUp:function(){varthatthis;var_arr[];that.data.dakaArr.map(item{_arr.push(item);})that.setData({signUp:_arr,count:_arr.length});//获取后就判断签到情况that.onJudgeSign();}})