怎么用js实现签到日历(JS,开发技术)

本文小编为大家详细介绍“怎么用js实现签到日历”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用js实现签到日历”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

wxml代码

<viewclass="boxMain"><viewclass="calendarHeader"><view>本月已签到<text>{{recordList.length}}</text>天</view></view><viewclass="calendarChange"><viewclass="calendarChangeLeftRight"catchtap="initDateList"data-month="{{chooseMonth-1}}"><imagemode="widthFix"src="{{static}}left_arrow.png"></image></view><text>{{chooseYear}}年{{chooseMonth+1}}月</text><viewclass="calendarChangeLeftRight"catchtap="initDateList"data-month="{{chooseMonth+1}}"><imagemode="widthFix"src="{{static}}right_arrow.png"></image></view></view><viewclass="calendarContent"><viewclass="calendarWeek"><text>日</text><text>一</text><text>二</text><text>三</text><text>四</text><text>五</text><text>六</text></view><viewclass="calendarDays"><viewwx:for="{{dateList}}"wx:key="index"wx:for-item="dateItem"><view>{{dateItem.day}}</view></view></view></view></view>

js代码：

constapp=getApp()consthttp=require('../../config/api.js');Page({data:{static:app.data.static,recordList:[],totalReward:{},dateList:[],chooseYear:newDate().getFullYear(),chooseMonth:newDate().getMonth(),currentDay:newDate().getDate(),dayNumsByMonth:null},onLoad(){this.initDateList();//初始化日历},initDateList:function(e){letthat=this;letchooseMonth=that.data.chooseMonth;letchooseYear=that.data.chooseYear;letcurrentDate=newDate();letcurrentYear=currentDate.getFullYear();letcurrentMonth=currentDate.getMonth();if(e){chooseMonth=e.currentTarget.dataset.month;if(chooseMonth>=12){chooseMonth=chooseMonth-12;chooseYear=chooseYear+1;}elseif(chooseMonth<0){chooseMonth=chooseMonth+12;chooseYear=chooseYear-1;}else{chooseMonth=chooseMonth;}letmonthCount=(currentYear-chooseYear)*12+currentMonth-chooseMonth;if(monthCount>0&&Math.abs(monthCount)>6){wx.showToast({title:'往前最多查看六个月',icon:'none',duration:1500})return}elseif(monthCount<0&&Math.abs(monthCount)>1){wx.showToast({title:'往后最多查看一个月',icon:'none',duration:1500})return}}that.setData({chooseMonth:chooseMonth,chooseYear:chooseYear})vardateList=[];letfirstDayWeek=newDate(that.data.chooseYear,that.data.chooseMonth,1).getDay();letdayNumsByMonth=newDate(that.data.chooseYear,that.data.chooseMonth+1,0).getDate();that.setData({dayNumsByMonth:dayNumsByMonth})for(leti=0;i<43;i++){letday=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';}elseif(day>that.data.currentDay){dateList[i].type='after';}else{dateList[i].type='current'}}elseif(that.data.chooseYear<currentYear||(that.data.chooseYear==currentYear&&that.data.chooseMonth<currentMonth)){dateList[i].type='before';}else{dateList[i].type='after';}}}},isTen:function(v){returnv>=10?v:`0${v}`}});

wxss代码

.boxMain{background-color:#fff;margin:36rpx30rpx22rpx30rpx;border-radius:10rpx;padding:020rpx;display:flex;flex-direction:column;}.boxMain.calendarHeader{display:flex;justify-content:space-between;color:#333333;font-size:28rpx;margin-top:40rpx;padding:04rpx;}.boxMain.calendarHeaderviewtext{color:#FE7458;padding:06rpx;}.boxMain.calendarHeaderview:last-child{font-size:24rpx;}.boxMain.calendarChange{display:flex;padding:050rpx;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:25rpx0;}.boxMain.calendarChange.calendarChangeLeftRight{width:50rpx;height:50rpx;display:flex;flex-direction:column;justify-content:center;}.boxMain.calendarChangeimage{width:12rpx;margin:0auto;}.boxMain.calendarContent.calendarWeek{font-size:26rpx;display:flex;justify-content:space-between;}.boxMain.calendarContent.calendarWeektext{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:0auto;border-radius:50%;}.boxMain.calendarContent.calendarDays.box{margin-top:-10rpx;}.boxMain.calendarContent.calendarDays.boximage{width:42rpx;}.boxMain.calendarContent.calendarDays.boxtext{float:left;margin-top:-20rpx;padding-left:4rpx;color:#FE7458;}

读到这里，这篇“怎么用js实现签到日历”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。