js实现签到日历_javascript技巧_

              本月已签到{{recordList.length}}天                                                                  {{chooseYear}}年{{chooseMonth+1}}月                                                               日             一             二             三             四             五             六                                                                     {{dateItem.day}}                                                  

const app = getApp() const http = require('../../config/api.js'); Page({   data: {     static: app.data.static,     recordList: [],     totalReward: {},     dateList: [],     chooseYear: new Date().getFullYear(),     chooseMonth: new Date().getMonth(),     currentDay: new Date().getDate(),     dayNumsByMonth: null   },   onLoad() {     this.initDateList(); //初始化日历   },   initDateList: function (e) {     let that = this;       let chooseMonth = that.data.chooseMonth;     let chooseYear = that.data.chooseYear;       let currentDate = new Date();     let currentYear = currentDate.getFullYear();     let currentMonth = currentDate.getMonth();       if (e) {       chooseMonth = e.currentTarget.dataset.month;       if (chooseMonth >= 12) {         chooseMonth = chooseMonth - 12;         chooseYear = chooseYear + 1;       } else if (chooseMonth < 0) {         chooseMonth = chooseMonth + 12;         chooseYear = chooseYear - 1;       } else {         chooseMonth = chooseMonth;       }       let monthCount = (currentYear - chooseYear) * 12 + currentMonth - chooseMonth;       if (monthCount > 0 && Math.abs(monthCount) > 6) {         wx.showToast({           title: '往前最多查看六个月',           icon: 'none',           duration: 1500         })           return       } else if (monthCount < 0 && Math.abs(monthCount) > 1) {         wx.showToast({           title: '往后最多查看一个月',           icon: 'none',           duration: 1500         })         return       }     }       that.setData({       chooseMonth: chooseMonth,       chooseYear: chooseYear     })     var dateList = [];       let firstDayWeek = new Date(that.data.chooseYear, that.data.chooseMonth, 1).getDay();     let dayNumsByMonth = new Date(that.data.chooseYear, that.data.chooseMonth + 1, 0).getDate();     that.setData({       dayNumsByMonth: dayNumsByMonth     })       for (let i = 0; i < 43; i++) {       let day = i - firstDayWeek + 1;       if (day > dayNumsByMonth && (i == 35 || i == 42)) {         that.setData({           dateList: dateList         });         return       }       dateList.push({         'year': '',         'month': '',         'day': '',         'type': '',       })         if (day > 0 && day <= dayNumsByMonth) {         dateList[i].year = that.data.chooseYear;         dateList[i].month = that.isTen(that.data.chooseMonth + 1);         dateList[i].day = that.isTen(day);         if (that.data.chooseYear == currentYear && that.data.chooseMonth == currentMonth) {             if (day < that.data.currentDay) {             dateList[i].type = 'before';           } else if (day > that.data.currentDay) {             dateList[i].type = 'after';           } else {             dateList[i].type = 'current'           }                    } else if (that.data.chooseYear < currentYear || (that.data.chooseYear == currentYear && that.data.chooseMonth < currentMonth)) {           dateList[i].type = 'before';                   } else {           dateList[i].type = 'after';         }       }     }   },   isTen: function (v) {     return v >= 10 ? v : `0${v}`   } });

.boxMain {   background-color: #fff;   margin: 36rpx 30rpx 22rpx 30rpx;   border-radius: 10rpx;   padding: 0 20rpx;   display: flex;   flex-direction: column; }   .boxMain .calendarHeader {   display: flex;   justify-content: space-between;   color: #333333;   font-size: 28rpx;   margin-top: 40rpx;   padding: 0 4rpx; }   .boxMain .calendarHeader view text {   color: #FE7458;   padding: 0 6rpx; }   .boxMain .calendarHeader view:last-child {   font-size: 24rpx; }   .boxMain .calendarChange {   display: flex;   padding: 0 50rpx;   align-items: center;   justify-content: space-between;   background-color: #F8F8FA;   border-radius: 25rpx;   height: 50rpx;   line-height: 50rpx;   font-size: 24rpx;   text-align: center;   margin: 25rpx 0; } .boxMain .calendarChange .calendarChangeLeftRight{   width: 50rpx;   height: 50rpx;   display: flex;   flex-direction: column;   justify-content: center; } .boxMain .calendarChange image{   width: 12rpx;   margin: 0 auto; } .boxMain .calendarContent .calendarWeek{   font-size: 26rpx;   display: flex;       justify-content: space-between; } .boxMain .calendarContent .calendarWeek text{   width: 14%;   height: 40rpx;   text-align: center; } .boxMain .calendarContent .calendarDays{   font-size: 26rpx;   display: flex;   justify-content: space-between;   flex-wrap:wrap;   align-items: center;   margin-top: 47rpx; } .boxMain .calendarContent .calendarDays>view{   width: 14%;   text-align: center;   display: block;       margin-bottom: 32rpx;   height: 46rpx;   line-height: 46rpx; } .boxMain .calendarContent .calendarDays>view>view{   width: 46rpx;   height: 46rpx;   margin: 0 auto;   border-radius: 50%; } .boxMain .calendarContent .calendarDays .box{   margin-top: -10rpx; } .boxMain .calendarContent .calendarDays .box image{   width: 42rpx; } .boxMain .calendarContent .calendarDays .box text{   float: left;   margin-top: -20rpx;   padding-left: 4rpx;   color: #FE7458; }