效果圖如下所示

.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='/images/rl.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">上個月</view></view><view class="centerView">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view><view class="rightBgView" bindtap="handleCalendar" data-handle="next"><view class="leftView">下個月</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='width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;{{ index == 0 ? "margin-left:" + sysW * marLet + "px;" : "" }}' class="dateView {{item.wook == getDate && judge == 1?'dateOn':''}}" wx:for="{{days}}" wx:key="index" bindtap="{{item.src?'wenldisp':''}}" data-index="{{index}}"><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">x</text></view></view> </view> <!-- 簽到彈窗 --> <view class="load" style="{{sign?'':'top:calc((100vh - 750rpx)/2);opacity: 0;z-index:-1;'}}"><image class="load-imagae" src="/images/register.png"></image><view class="load-centent"><view>簽到成功</view><view>持續簽到<span>{{continuity}}</span>天</view><view bindtap="popup">好的</view></view> </view>

.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:2,//簽到天數sign:false,//簽到彈窗},getProWeekList:function(){let that=thislet date=new Date()let cur_year = parseInt(date.getFullYear())let cur_month = parseInt(date.getMonth() + 1)let obinl = parseInt(util.getWeekByDate(new Date()));//今天周幾let danqian = new Date(date.getTime()).getDate()let shang = that.getThisMonthDays(((cur_month - 1) < 1?cur_year-1:cur_year),((cur_month - 1) < 1?12:cur_month - 1))let ben = that.getThisMonthDays(cur_year,cur_month)let xyue = 7 - (7 - obinl)let syue = 7 - obinllet array = []let name_a = 0let name_b = 0let name_c = 0for(let i = 0;i<xyue;i++){name_a = xyue - danqianname_b = shang - name_aname_c = name_b + i + 1if(name_c > shang){name_c = 1 + (name_a <= i?i - name_a:0)}array.push({wook:name_c})}for(let i = 0;i<syue;i++){name_a = danqian + i + 1if(name_a > ben){name_a = name_a - ben}array.push({wook:name_a,src:''})}that.setData({day:array})},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) {var timestamp = Date.parse(new Date());timestamp = timestamp / 1000; var n = timestamp * 1000;var tiem = new Date(n); var Y = tiem.getFullYear();var M = (tiem.getMonth() + 1 < 10 ? '0' + (tiem.getMonth() + 1) : tiem.getMonth() + 1);let getDate = this.data.ornot?this.data.getDate:(this.data.getDate - 1) //多少號let cur_year = this.data.cur_year//年let cur_month = this.data.cur_month//月let thisMonthDays = this.getThisMonthDays(year, month);let month_s = year.toString() + (month.toString().length == 1?'0' + month.toString():month.toString());let openitem = (this.data.opentime[0] + '' +((this.data.opentime[1]+'').length == 1?'0'+this.data.opentime[1]:this.data.opentime[1]));for (let i = 1; i <= thisMonthDays; i++) {if(month_s > openitem){this.data.days.push({wook:i,src:''});}else if(openitem < month_s && month == this.data.shuttime[1]){//小于開始月份this.data.days.push({wook:i,src:i <= getDate?'/images/newspaper.png':''});}else if(openitem == month_s && month == this.data.opentime[1]){if((Y+''+M) == month_s && this.data.opentime[2] <= i && i <= (this.data.ornot?this.data.getDate:this.data.getDate-1)){this.data.days.push({wook:i,src:'/images/newspaper.png'});}else if((Y+''+M) != month_s && this.data.opentime[2] <= i){this.data.days.push({wook:i,src:'/images/newspaper.png'});}else{this.data.days.push({wook:i,src:''});}}else if(openitem == month_s && month < this.data.shuttime[1]){this.data.days.push({wook:i,src:this.data.opentime[2] <= i?'/images/newspaper.png':''});}else if(openitem < month_s && month < this.data.shuttime[1]){this.data.days.push({wook:i,src:'/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);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})}} },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, month, 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 = thislet 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年份減1cur_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 - 1)){that.data.day[obinl - i - 1].src = "/images/newspaper.png"}}else{if(0 <= (obinl - i - 2)){that.data.day[obinl - i - 2].src = "/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){//連續簽到天數大于上個月加當前日期的和let num = 1let guil = ''let gumlitem = continuity - rili - that.data.getDate + ornotfor(let i = 0;i < num;i++){num++cur_month = cur_month - 1if (cur_month < 1) {cur_year = cur_year - 1;cur_month = 12;}guil = parseInt(that.getThisMonthDays(cur_year, cur_month))//上月天數gumlitem = gumlitem - guilif(gumlitem < 1){gumlitem = Math.abs(gumlitem) + 1num = 0}}that.setData({opentime:[cur_year,cur_month,gumlitem],//開始簽到時間})}else{that.setData({opentime:[cur_year,cur_month,(rili - qindao + 1 - ornot)],//開始簽到時間})}}else{that.setData({opentime:[that.data.cur_year,that.data.cur_month,(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,days:[],cur_year:date.getFullYear(),cur_month:date.getMonth() + 1,todayIndex:date.getDate(),judge:1,})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.indexthis.data.day[index].check = this.data.day[index].check?false:truethis.setData({day:this.data.day})},//數組顯示文字wenldisp:function(e){let index = e.currentTarget.dataset.indexthis.data.days[index].check = this.data.days[index].check?false:truethis.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,})}}, })

.wxss

view,image{box-sizing: border-box;} 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,0,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; }

util.js引入文件：https://blog.csdn.net/qq_43764578/article/details/106059340
簽到彈窗-圖片素材：https://blog.csdn.net/qq_43764578/article/details/105854829

這個是我在網上拔下來的模板：https://www.cnblogs.com/web-know-how/p/9550137.html

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

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


遇到問題可以看我主頁加我Q，很少看博客，對你有幫助別忘記點贊收藏。

總結

以上是生活随笔為你收集整理的微信小程序打卡签到页面（有效果图)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。