网站首页> 前端开发> JavaScript> js实现签到日历

js实现签到日历

时间:2022-08-29 10:14:56 阅读:280次 来源:互联网

本文实例为大家分享了js实现签到日历的具体代码,供大家参考,具体内容如下

js实现签到日历

wxml代码

<view class="boxMain" style="height:{{dateList.length>35?'805rpx':'730rpx'}}">
    <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 style="color:{{dateItem.type=='current'?'#ffffff':(dateItem.type=='before'?'#979797':(dateItem.type=='selected'?'#FE7458':''))}};background-color:{{ dateItem.type=='current'?'#FE7458':(dateItem.type=='before'?'#F8F8FA':(dateItem.type=='selected'?'#ffdcd5':'')) }}">
                    {{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;
}


本文地址:https://www.manongw.com/article/386.html

文章来源:转载于CSDN,转载网址为https://blog.csdn.net/qq_41854262/article/details/120371633

版权申明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 ezhongheng@126.com 举报,一经查实,本站将立刻删除。

相关文章
  • 本文主要介绍了JS pushlet XMLAdapter适配器用法案例解析的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-16 18:00
  • 本文主要介绍了JSON stringify方法原理及实例解析的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-24 10:11
  • 本文主要介绍了使用TS来编写express服务器的方法步骤的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-30 09:26
  • 本文主要介绍了详解JavaScript 高阶函数的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 08:47
  • 本文主要介绍了详解webpack的clean-webpack-plugin插件报错的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-16 18:06
  • 本文主要介绍了JavaScript setTimeout()基本用法有哪些的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-04 22:05
  • 本文主要介绍了原生JS实现弹幕效果的简单操作指南的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-10 16:04
  • 本文主要介绍了JS实现简单贪吃蛇小游戏的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-10-29 08:59
  • 本文主要介绍了JavaScript实现串行请求的示例代码的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 08:25
  • 本文主要介绍了JavaScript 实现轮播图特效的示例的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...
    2020-11-05 16:59