本文小编为大家详细介绍“怎么用js实现签到日历”，内容详细，步骤清晰，细节处理妥当，希望这篇“怎么用js实现签到日历”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
wxml代码
计算
安全
数据库
网络和加速
企业服务
<view class="boxMain" >
<view class="calendarHeader">
<view>本月已签到<text>{{recordList.length}}</text>天</view>
</view>
<view class="calendarChange">
<view class="calendarChangeLeftRight" catchtap="initDateList" data-month="{{chooseMonth-1}}">
<image mode="widthFix" src="{{static}}left_arrow.png"></image>
</view>
<text>{{chooseYear}}年{{chooseMonth+1}}月</text>
<view class="calendarChangeLeftRight" catchtap="initDateList" data-month="{{chooseMonth+1}}">
<image mode="widthFix" src="{{static}}right_arrow.png"></image>
</view>
</view>
<view class="calendarContent">
<view class="calendarWeek">
<text>日</text>
<text>一</text>
<text>二</text>
<text>三</text>
<text>四</text>
<text>五</text>
<text>六</text>
</view>
<view class="calendarDays">
<view wx:for="{{dateList}}" wx:key="index" wx:for-item="dateItem">
<view >
{{dateItem.day}}
</view>
</view>
</view>
</view>
</view>js代码：
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}`
}
});wxss代码
.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;
}读到这里，这篇“怎么用js实现签到日历”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
