本文例項為大家分享了微信小程式實現打卡簽到頁面的具體程式碼，供大家參考，具體內容如下

效果圖如下所示

.wxml

<view class='gs_banner'>
 <view class='gs_continue'>
 <view>每日堅持簽到</view>
 <view>總共簽到：<text>{{continuity}}</text>天</view>
 </view>
</view> 
<view class='gs_sign'>
 <view class='gs_sign_box'>
 <view class='gs_pillar'>
 <view class='gs_post'>
 <view></view>
 </view>
 <view class='gs_post'>
 <view></view>
 </view>
 <view class='gs_post'>
 <view></view>
 </view>
 <view class='gs_post'>
 <view></view>
 </view>
 <view class='gs_post'>
 <view></view>
 </view>
 
 </view>
 <view class='gs_sign_day'>
 <image bindtap='onshow' src='/pages/images/sign_icon.png'></image>
 <view>持續簽到 <text>{{continuity}}</text>天</view>
 </view>
 <view class='gs_sign_content'>
 <view class='gs_week'>
 <block wx:for="{{week}}" wx:key="index">
  <view class='gs_wook'>
  <view style='width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;'>{{item.wook}}</view>
  </view>
 </block>
 </view>
 <view class='gs_week'>
 <block wx:for="{{day}}" wx:key="index">
  <view class="gs_wook {{ item.wook == getDate ? 'dateOn' : ''}}" style='width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;' bindtap="{{item.src?'wenlin':''}}" data-index="{{index}}">
  <view id="{{item.src?'fuconl':''}}" style="{{item.src && !item.check?'visibility: hidden;':''}}">{{item.wook}}</view>
  <view class='gs_clocksucceed' wx:if="{{item.src && !item.check}}">
  <image src='{{item.src}}'></image>
  </view>
  </view>
 </block>
 </view>
 <view class='gs_circle'>
 <view class='gs_incircle' style="{{ornot?'background-color:#e7ebed;cursor:auto;':''}}">
  <view class='gs_excircle' bindtap="{{ornot?'':'dakainc'}}">
  <view class='gs_innercircle' style="{{ornot?'background-color:#ddd;':''}}">{{ornot?'已打卡':'打卡'}}</view>
  </view>
 </view>
 </view>
 </view>
 </view>
</view>
<!-- 彈出部分 -->
<view class='gs_calendar' style='display:{{display}}'>
 <view class='gs_bg' bindtap='onhide'></view>
 <view class='gs_gs_calendar_box'>
 <view class="canlendarBgView">
 <view class="canlendarView">
 <view class="canlendarTopView">
  <view class="leftBgView" bindtap="handleCalendar" data-handle="prev">
  <view class="leftView">
  <text class="cuIcon-back"></text>
  </view>
  </view>
  <view class="centerView">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
  <view class="rightBgView" bindtap="handleCalendar" data-handle="next">
  <view class="leftView">
  <text class="cuIcon-right"></text>
  </view>
  </view>
 </view>
 <view class="weekBgView">
  <view style='width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;' class="weekView" wx:for="{{weeks_ch}}" wx:key="index" data-idx="{{index}}">{{item}}</view>
 </view>
 <view class="dateBgView">
  <view wx:if="{{hasEmptyGrid}}" class="dateEmptyView" wx:for="{{empytGrids}}" wx:key="index" data-idx="{{index}}">
  </view>
  <view style='{{ index == 0 ? "margin-left:" + sysW * marLet + "px;" : "" }}width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;' class="dateView {{item.wook == getDate && judge == 1?'dateOn':''}}" wx:for="{{days}}" wx:key="index" bindtap="{{item.src?'wenldisp':''}}" data-index="{{index}}">
  <!-- data-idx="{{index}}" bindtap="dateSelectAction" -->
  <view style="{{item.src && !item.check?'visibility: hidden;':''}}" id="{{item.src?'fuconl':''}}" class="datesView">{{item.wook}}</view>
  <view class='clocksucceed' wx:if="{{item.src && !item.check}}">
  <image src='{{item.src}}'></image>
  </view>
  </view>
 </view>
 </view>
 </view>
 <view class='del'>
 <text bindtap="onhide" class="cuIcon-close"></text>
 </view>
 </view>
</view>
<!-- 簽到彈窗 -->
<view class="load" style="{{sign?'':'top:calc((100vh - 750rpx)/2);opacity: 0;z-index:-1;'}}">
 <image class="load-imagae" src="/pages/images/register.png"></image>
 <view class="load-centent">
 <view>簽到成功</view>
 <view>持續簽到<span>{{continuity}}</span>天</view>
 <view bindtap="popup">好的</view>
 </view>
</view>

.js

//logs.js
const util = require('../../../utils/util.js')

Page({
 data: {
 sysW: null,lastDay: null,year: null,hasEmptyGrid: false,cur_year: '',cur_month: '',firstDay: null,getDate:null,month:null,display:"none",week:[
 {
 wook: "一"
 },{
 wook: "二"
 },{
 wook: "三"
 },{
 wook: "四"
 },{
 wook: "五"
 },{
 wook: "六"
 },{
 wook: "日"
 },],day:[],days:[],ornot:false,//今天是否簽到
 continuity:18,//簽到天數
 sign:false,//簽到彈窗
 },getProWeekList:function(){
 let that=this
 let date=new Date()
 let dateTime = date.getTime(); // 獲取現在的時間
 let dateDay = date.getDay();// 獲取現在的
 let oneDayTime = 24 * 60 * 60 * 1000; //一天的時間
 let proWeekList;
 let weekday;
 for (let i = 0; i < 7; i++) {
 let time = dateTime - (dateDay - 1 - i) * oneDayTime;
 proWeekList = new Date(time).getDate(); //date格式轉換為yyyy-mm-dd格式的字串
 weekday = "day[" + i+"].wook"
 that.setData({
 [weekday]: proWeekList,})
 //that.data.day[i].wook = new Date(time).getDate();
 }
 },dateSelectAction: function (e) {
 let cur_day = e.currentTarget.dataset.idx;
 this.setData({
 todayIndex: cur_day
 })
 console.log(`點選的日期:${this.data.cur_year}年${this.data.cur_month}月${cur_day + 1}日`);
 },setNowDate: function () {
 const date = new Date();
 const cur_year = date.getFullYear();
 const cur_month = date.getMonth() + 1;
 const todayIndex = date.getDate();
 const weeks_ch = ['日','一','二','三','四','五','六'];
 this.calculateEmptyGrids(cur_year,cur_month);
 this.setData({
 cur_year: cur_year,cur_month: cur_month,weeks_ch,todayIndex,})
 },getThisMonthDays(year,month) {
 return new Date(year,month,0).getDate();
 },getFirstDayOfWeek(year,month) {
 return new Date(Date.UTC(year,month - 1,1)).getDay();
 },calculateEmptyGrids(year,month) {
 const firstDayOfWeek = this.getFirstDayOfWeek(year,month);
 let empytGrids = [];
 if (firstDayOfWeek > 0) {
 for (let i = 0; i < firstDayOfWeek; i++) {
 empytGrids.push(i);
 }
 this.setData({
 hasEmptyGrid: true,empytGrids
 });
 } else {
 this.setData({
 hasEmptyGrid: false,empytGrids: []
 });
 }
 },calculateDays(year,month) {
 let getDate = this.data.getDate//多少號
 let cur_year = this.data.cur_year//年
 let cur_month = this.data.cur_month//月
 let thisMonthDays = this.getThisMonthDays(year,month);
 for (let i = 1; i <= thisMonthDays; i++) {
 if(this.data.opentime[1] < month && month == this.data.shuttime[1]){//小於開始月份
 this.data.days.push({wook:i,src:i <= getDate?'/pages/images/newspaper.png':''});
 }else if(this.data.opentime[1] == month && month == this.data.shuttime[1]){
 if((this.data.opentime[2] <= i) && (i <= this.data.shuttime[2])){
  this.data.days.push({wook:i,src:'/pages/images/newspaper.png'});
 }else{
  this.data.days.push({wook:i,src:''});
 }
 }else if(this.data.opentime[1] == month && month < this.data.shuttime[1]){
 this.data.days.push({wook:i,src:this.data.opentime[2] <= i?'/pages/images/newspaper.png':''});
 }else if(this.data.opentime[1] < month && month < this.data.shuttime[1]){
 this.data.days.push({wook:i,src:'/pages/images/newspaper.png'});
 }else{
 this.data.days.push({wook:i,src:''});
 }
 }
 this.setData({
 days:this.data.days,//上下月
 handleCalendar(e) {
 const handle = e.currentTarget.dataset.handle;
 const cur_year = this.data.cur_year;
 const cur_month = this.data.cur_month;
 　　
 this.setData({
 days:[]
 })

 if (handle === 'prev') {
 let newMonth = cur_month - 1;
 let newYear = cur_year;
 if (newMonth < 1) {
 newYear = cur_year - 1;
 newMonth = 12;
 }

 this.calculateDays(newYear,newMonth);
 this.calculateEmptyGrids(newYear,newMonth);

 let firstDay = new Date(newYear,newMonth - 1,1);
 this.data.firstDay = firstDay.getDay();
 this.setData({
 cur_year: newYear,cur_month: newMonth,marLet: this.data.firstDay
 })
 if (this.data.month == newMonth) {
 this.setData({
 judge: 1
 })
 } else {
 this.setData({
 judge: 0
 })
 }
 } else {
 let newMonth = cur_month + 1;
 let newYear = cur_year;
 if (newMonth > 12) {
 newYear = cur_year + 1;
 newMonth = 1;
 }

 this.calculateDays(newYear,newMonth);
 let firstDay = new Date(newYear,marLet: this.data.firstDay
 })
 if (this.data.month == newMonth){
 this.setData({
 judge:1
 })
 }else{
 this.setData({
 judge: 0
 })
 }
 }
 },dataTime: function () {
 var date = new Date();
 var year = date.getFullYear();
 var month = date.getMonth();
 var months = date.getMonth() + 1;

 //獲取現今年份
 this.data.year = year;

 //獲取現今月份
 this.data.month = months;

 //獲取今日日期
 this.data.getDate = date.getDate();

 //最後一天是幾號
 var d = new Date(year,months,0);
 this.data.lastDay = d.getDate();

 //第一天星期幾
 let firstDay = new Date(year,1);
 this.data.firstDay = firstDay.getDay();
 this.setData({
 marLet:this.data.firstDay
 })
 },onshow:function(){
 this.setData({
 display:"block",onhide:function(){
 this.setData({
 display: "none",onLoad: function (options) {
 var that = this;
 this.setNowDate();
 this.getProWeekList()
 this.dataTime();
 var res = wx.getSystemInfoSync();
 this.setData({
 sysW: res.windowHeight / 12-5,//更具螢幕寬度變化自動設定寬度
 getDate: this.data.getDate,judge:1,month: this.data.month,});
 this.sigarr();
 },//獲取陣列引數
 sigarr:function(e){
 let that = this
 let ornot = that.data.ornot?0:1//當天是否簽到
 let continuity = that.data.continuity//連續簽到天數
 let obinl = parseInt(util.getWeekByDate(new Date()));//今天周幾
 let cur_year = that.data.cur_year;//年份
 let cur_month = that.data.cur_month - 1;//月份
 if (cur_month < 1) {//月份小於1年份減1
 cur_year = cur_year - 1;
 cur_month = 12;
 }
 let num = obinl<continuity?(obinl + 1):continuity
 //七日簽到陣列
 for(let i = 0;i < num;i++){
 if(i <= (obinl + 1)){ 
 if(ornot == 0){
  if(0 <= (obinl - i)){
  that.data.day[obinl - i].src = "/pages/images/newspaper.png"
  }
 }else{
  if(0 <= (obinl - i - 1)){
  that.data.day[obinl - i - 1].src = "/pages/images/newspaper.png"
  }
 }
 }else{
 return false
 }
 } 
 //簽到陣列
 that.setData({
 day:that.data.day,//七天簽到
 shuttime:[that.data.cur_year,that.data.cur_month,(that.data.getDate - ornot)],//結束簽到時間
 })
 if(that.data.getDate < continuity){//當前天數不夠減去連續簽到天數
 let qindao = continuity - that.data.getDate//簽到天數
 let rili = parseInt(that.getThisMonthDays(cur_year,cur_month))//上月天數
 if((rili + that.data.getDate) < continuity){//連續簽到天數大於上個月加當前日期的和
 cur_month = cur_month - 1
 if (cur_month < 1) {
  cur_year = cur_year - 1;
  cur_month = 12;
 }
 let guil = parseInt(that.getThisMonthDays(cur_year,cur_month))//上月天數
 that.setData({
  opentime:[cur_year,cur_month,(guil - (qindao - rili) + 1 - ornot)],//開始簽到時間
 })
 }else{
 that.setData({
  opentime:[cur_year,(rili - qindao + 1 - ornot)],//開始簽到時間
 })
 }
 }else{
 that.setData({
 opentime:[that.data.cur_year,(that.data.getDate - continuity + 1 - ornot)],//開始簽到時間
 })
 }
 this.calculateDays(that.data.cur_year,that.data.cur_month);//陣列獲取
 },//打卡簽到
 dakainc:function(e){
 let that = this 
 let date = new Date();
 that.setData({
 ornot:true,continuity:that.data.continuity + 1,cur_year:date.getFullYear(),cur_month:date.getMonth() + 1,todayIndex:date.getDate(),})
 that.dataTime()//年月份排版
 that.calculateEmptyGrids(that.data.cur_year,that.data.cur_month)//年月份排版
 that.sigarr();//獲取陣列引數
 that.popup();//顯示簽到彈窗
 },//顯示簽到彈窗
 popup:function(e){
 this.setData({
 sign:!this.data.sign
 })
 },//七日陣列顯示文字
 wenlin:function(e){
 let index = e.currentTarget.dataset.index
 this.data.day[index].check = this.data.day[index].check?false:true
 this.setData({
 day:this.data.day
 })
 },//陣列顯示文字
 wenldisp:function(e){
 let index = e.currentTarget.dataset.index
 this.data.days[index].check = this.data.days[index].check?false:true
 this.setData({
 days:this.data.days
 })
 },//滑動切換
 swiperTab: function (e) {
 var that = this;
 that.setData({
 currentTab: e.detail.current
 });
 },//點選切換
 clickTab: function (e) {
 var that = this;
 if (this.data.currentTab === e.target.dataset.current) {
 return false;
 } else {
 that.setData({
 currentTab: e.target.dataset.current,})
 }
 },upper: function (e) {
 console.log(e)
 },lower: function (e) {
 console.log(e)
 },scroll: function (e) {
 console.log(e)
 },})

.wxss

@import '../../../components/buteic/buteic.wxss';
page{
 background-color: #f4f4f4;
}
.gs_banner image{
 width:750rpx;
 height:256rpx;
 vertical-align: top;
}
.gs_continue{
 background-color: #fff;
 padding:30rpx 20rpx;
}
.gs_continue view:first-child{
 font-size:34rpx;
 color:#454545;
 padding-bottom:20rpx;
}
.gs_continue view:last-child{
 font-size:32rpx;
 color:#707070;

}
.gs_continue view text{
 color:#dd2522;
}
.gs_sign{
 margin-top:30rpx;
}
.gs_sign_box{
 background-color:#fff;
 width:677rpx;
 margin:0 auto;
 position:relative;
 border-radius:15rpx;
}
.gs_pillar{
 overflow:hidden;
 position:absolute;
 top:-16rpx;
 width:100%;
}
.gs_pillar .gs_post{
 float:left;
 width:20%;
 text-align: center;
}
.gs_pillar .gs_post view{
 display:inline-block;
 width:18rpx;
 height:42rpx;
 background-color:#53acfc;
 border-radius:20rpx;
}
.gs_sign_day{
 padding:60rpx 20rpx 0;
}
.gs_sign_day image{
 width:45rpx;
 height:45rpx;
 vertical-align: middle;
 position: relative;
 bottom: 6rpx;
}
.gs_sign_day view{
 display:inline-block;
 font-size: 30rpx;
 margin-left: 14rpx;
 color:#707070;
}
.gs_sign_day view text{
 color:#dd2522;
}
.gs_sign_content{
 padding:20rpx;
}
.gs_week{
 overflow:hidden;
}
.gs_wook{
 display:inline-block;
 text-align: center;
 position: relative;
 box-sizing: border-box;
}
.gs_wook view{
 display: inline-block;
 font-size:30rpx;
 color:#707070;
 width:60rpx;
 height:60rpx;
 line-height:60rpx;
}
.gs_clocksucceed{
 position:absolute;
 top:10rpx;
 left:16rpx;
}
.gs_clocksucceed image{
 width:50rpx;
 height:50rpx;
 vertical-align: bottom;
 position: relative;
 bottom: 2rpx;
}
.gs_sign_content .gs_week:nth-child(2) .gs_wook view{
 color:#454545;
}
.gs_circle{
 padding:50rpx 0;
}
.gs_incircle{
 width:225rpx;
 height:225rpx;
 background-color: #cce6ff;
 border-radius:50%;
 padding: 10rpx;
 margin:20rpx auto;
 cursor: pointer;
}
.gs_excircle{
 width:100%;
 height: 100%;
 background-color:#fff;
 border-radius:50%;
 position: relative;
}
.gs_innercircle{
 width:190rpx;
 height:190rpx;
 background-color: #8bc4f6;
 border-radius:50%;
 position: absolute;
 left: 0;
 top: 0;
 right: 0;
 bottom: 0;
 margin: auto;
 display: flex;
 align-items: center;
 justify-content: center;
 color:#fff;
 font-size:36rpx;
}
.gs_calendar{
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 display:none;
}
.gs_bg{
 position:fixed;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background-color:rgba(0,.3);
}
.gs_gs_calendar_box{
 position: absolute;
 top:180rpx;
 left:40rpx;
 width:677rpx;
 background-color:#fff;
 padding:20rpx;
 box-sizing: border-box;
}
.canlendarTopView{
 overflow:hidden;
 padding:40rpx 20rpx;
 margin-left:20rpx;
 display: flex;
 align-items: center;
}
.leftBgView{
 float:left;
 width:153rpx;
 text-align: center;
}
.leftView image{
 width:60rpx;
 height:60rpx;
}
.centerView{
 float:left;
 font-size:32rpx;
 height:60rpx;
 line-height:60rpx;
 width:260rpx;
 text-align: center;
}
.rightBgView{
 float:left;
 width:156rpx;
 text-align: center;
}
.rightView image{
 width:60rpx;
 height:60rpx;
}
.weekBgView{
 overflow:hidden;
}
.weekView{
 float:left;
 width:14.28571428571429%;
 text-align: center;
 font-size:30rpx;
 color:#707070;
}
.dateBgView{
 overflow:hidden;
 margin-bottom:20rpx;
}
.dateView{
 display:inline-block;
 text-align: center;
 position:relative;
}
.datesView{
 font-size:30rpx;
 color:#2b2b2b;
}
.dateOn{
border-radius: 50%;
background-color: #53acfc;
color: #fff !important;
}
.del{
 position:absolute;
 top:-20rpx;
 right:-20rpx;
 width:50rpx;
 height:50rpx;
 background-color:#909090;
 border-radius:50%;
 display: flex;
 align-items: center;
 justify-content: center;
}
.del>text{
 color: #fff;
 font-size: 36rpx;
}
.leftView>text{
 font-size: 40rpx;
}
.clocksucceed{
 position:absolute;
 top:-3rpx;
 left:20rpx;
}
.clocksucceed image{
 width:50rpx;
 height:50rpx;
 vertical-align: middle;
 position: relative;
 bottom: 4rpx;
}
#fuconl{
 color: #FF6666;
}
/* 簽到彈窗 */
.load{
 width: 80%;
 height: 600rpx;
 position: fixed;
 top:calc((100vh - 800rpx)/2);
 left: 10%;
 transition: all 0.3s ease-in-out 0s;
 -webkit-transition: all 0.3s ease-in-out 0s;
 opacity: 1;
 z-index: 10;
}
.loadingpic {
 width: 100%;
 height: 93%;
 position: absolute;
 animation: load 3s linear 1s infinite;
 z-index: 10;
 margin-top: 7%;
}
@keyframes load{
 0%{
 webkit-transform: rotate(0deg);
 transform: rotate(0deg);
 }
 100%{
 webkit-transform: rotate(360deg);
 transform: rotate(360deg);
 }
}
.load-imagae{
 width:400rpx;
 height:400rpx;
 margin: 100rpx calc((100% - 400rpx)/2);
 position: absolute;
 z-index: 11;
}
.load-centent{
 width:400rpx;
 height:400rpx;
 margin: 100rpx calc((100% - 400rpx)/2);
 position: relative;
 z-index: 12;
 text-align: center;
 padding: 25% 10% 5% 10%;
}
.load-centent>view:nth-child(1){
 font-size: 34rpx;
 color: #fff;
}
.load-centent>view:nth-child(2){
 color: #fff;
 opacity: 0.7;
 margin: 20rpx 0;
 font-size: 24rpx;
}
.load-centent>view:nth-child(3){
 width: 85%;
 margin: 30rpx 7.5% 0 7.5%;
 height: 70rpx;
 line-height: 70rpx;
 border-radius: 40rpx;
 background-color: #F8D168;
 color: #EB4331;
 font-size: 30rpx;
}

js引入檔案：微信小程式獲取當前時間及星期幾

點選獲取：簽到彈窗-圖片素材

這個是我在網上拔下來的模板：微信小程式實現日曆簽到

這個簽到模板是從網上拔下來，然後自己整理了一下把修改的地方都備註了一下，整個簽到流程算是走通了，複製下來就能用。

簽到流程是根據後臺介面返回一個連續簽到時間，還有今天是否簽到，連續簽到三十天就會重置簽到進行修改的。

為大家推薦現在關注度比較高的微信小程式教程一篇：《微信小程式開發教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。