您好,登錄后才能下訂單哦!
本文小編為大家詳細(xì)介紹“怎么用js實(shí)現(xiàn)簽到日歷”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“怎么用js實(shí)現(xiàn)簽到日歷”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
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: '往前最多查看六個(gè)月', icon: 'none', duration: 1500 }) return } else if (monthCount < 0 && Math.abs(monthCount) > 1) { wx.showToast({ title: '往后最多查看一個(gè)月', 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實(shí)現(xiàn)簽到日歷”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。