微信小程序实现日历签到


Posted in Javascript onSeptember 21, 2020

近日做了一个项目需要用到日历插件,在网上找了一部分感觉跟项目不对口,所以就查考了其他的日历插件做了一个。

需求:

如图:

微信小程序实现日历签到

微信小程序实现日历签到

代码如下:

index.wxml:

<!--pages/pictruesign/pictrue.wxml-->
<view class='gs_banner'>
 <image src='../../image/banner.jpg'></image>
 <view class='gs_continue'>
  <view>每日坚持签到</view>
  <view>总共签到:<text>20</text>天</view>
 </view>
</view> 
<view class='gs_sign'>
 <view class='gs_sign_box'>
  <view class='gs_pillar'>
   <view class='gs_post'>
    <view></view>
   </view>
   <view class='gs_post'>
    <view></view>
   </view>
   <view class='gs_post'>
    <view></view>
   </view>
   <view class='gs_post'>
    <view></view>
   </view>
   <view class='gs_post'>
    <view></view>
   </view>
   
  </view>
  <view class='gs_sign_day'>
   <image bindtap='onshow' src='../../image/sign_icon.png'></image>
   <view>持续签到 <text>2</text>天</view>
  </view>
  <view class='gs_sign_content'>
   <view class='gs_week'>
    <block wx:for="{{week}}" wx:key="index">
     <view class='gs_wook'>
      <view style='width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;'>{{item.wook}}</view>
     </view>
    </block>
   </view>
   <view class='gs_week'>
    <block wx:for="{{day}}" wx:key="index">
     <view class='gs_wook' style='width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;'>
      <view class="{{ item.wook == getDate ? 'dateOn' : ''}}}">{{item.wook}}</view>
      <view class='gs_clocksucceed' wx:if="{{item.src}}"><image src='{{item.src}}'></image></view>
     </view>
    </block>
   </view>
   <view class='gs_circle'>
    <view class='gs_incircle'>
     <view class='gs_excircle'>
      <view class='gs_innercircle'>
       <view class='gs_btn'>
        <text>打卡</text>
       </view>
      </view>
     </view>
    </view>
   </view>
  </view>
 </view>
</view>
<view class='gs_calendar' style='display:{{display}}'>
 <view class='gs_bg' bindtap='onhide'></view>
 <view class='gs_gs_calendar_box'>
  <view class="canlendarBgView">
   <view class="canlendarView">
    <view class="canlendarTopView">
     <view class="leftBgView" bindtap="handleCalendar" data-handle="prev">
      <view class="leftView"><image src='../../image/leftward.png'></image></view>
     </view>
     <view class="centerView">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view>
     <view class="rightBgView" bindtap="handleCalendar" data-handle="next">
      <view class="rightView"><image src='../../image/rightward.png'></image></view>
     </view>
    </view>
    <view class="weekBgView">
     <view style='width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;' class="weekView" wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view>
    </view>
    <view class="dateBgView">
     <view wx:if="{{hasEmptyGrid}}" class="dateEmptyView" wx:for="{{empytGrids}}" wx:key="{{index}}" data-idx="{{index}}">
     </view>
     <view style='{{ index == 0 ? "margin-left:" + sysW * marLet + "px;" : "" }}width: {{ sysW }}px; height: {{ sysW }}px; line-height: {{ sysW }}px;' class="dateView" wx:for="{{days}}" wx:key="{{index}}" data-idx="{{index}}" bindtap="dateSelectAction">
      <view class="datesView {{ item.item == getDate && judge==1 ? 'dateOn' : ''}}}">{{item.item}}</view>
      <view class='clocksucceed' wx:if="{{item.src}}"><image src='{{item.src}}'></image></view>
     </view>
    </view>
   </view>
  </view>
  <view class='del' bindtap='onhide'>
   <image src='../../image/del.png'></image>
  </view>
 </view>
</view>
<import src="../copy/copy.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

index.wxss

.gs_banner{}
.gs_banner image{
  width:750rpx;
  height:256rpx;
  vertical-align: top;
}
.gs_continue{
  background-color: #fff;
  padding:30rpx 20rpx;
}
.gs_continue view:first-child{
  font-size:34rpx;
  color:#454545;
  padding-bottom:20rpx;
}
.gs_continue view:last-child{
  font-size:32rpx;
  color:#707070;

}
.gs_continue view text{
  color:#dd2522;
}
.gs_sign{
  margin-top:30rpx;
}
.gs_sign_box{
  background-color:#fff;
  width:677rpx;
  margin:0 auto;
  position:relative;
  border-radius:15rpx;
}
.gs_pillar{
  overflow:hidden;
  position:absolute;
  top:-16rpx;
  width:100%;
}
.gs_pillar .gs_post{
   float:left;
   width:20%;
   text-align: center;
}
.gs_pillar .gs_post view{
  display:inline-block;
  width:18rpx;
  height:42rpx;
  background-color:#53acfc;
  border-radius:20rpx;
}
.gs_sign_day{
  padding:60rpx 20rpx 0;
}
.gs_sign_day image{
  width:50rpx;
  height:50rpx;
  vertical-align: middle;
}
.gs_sign_day view{
  display:inline-block;
  font-size: 30rpx;
  margin-left: 20rpx;
  color:#707070;
}
.gs_sign_day view text{
  color:#dd2522;
}
.gs_sign_content{
  padding:20rpx;
}
.gs_week{
  overflow:hidden;
}
.gs_wook{
  display:inline-block;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}
.gs_wook view{
  display: inline-block;
  font-size:30rpx;
  color:#707070;
  width:60rpx;
  height:60rpx;
  line-height:60rpx;
}
.gs_clocksucceed{
  position:absolute;
  top:10rpx;
  left:16rpx;
  background-color:#fff;
}
.gs_clocksucceed image{
  width:50rpx;
  height:50rpx;
  vertical-align: bottom;
}
.gs_sign_content .gs_week:nth-child(2) .gs_wook view{
  color:#454545;
}
.gs_circle{
  padding:50rpx 0;
}
.gs_incircle{
  width:225rpx;
  height:225rpx;
  background-image: linear-gradient(to top,#8bc4f6,#8bc4f6);
  border-radius:50%;
  padding:10rpx;
  margin:20rpx auto;
  cursor: pointer;
}
.gs_excircle{
  width:205rpx;
  height: 205rpx;
  background-color:#fff;
  border-radius:50%;
  padding:10rpx;
}
.gs_innercircle{
  width:185rpx;
  height:185rpx;
  background-image:linear-gradient(to top,#53acfc,#63b2f7);
  border-radius:50%;
  padding:10rpx;
}
.gs_btn{
  text-align: center;
}
.gs_btn text{
  background-color:transparent;
  border:none;
  outline:none;
  color:#fff;
  line-height:185rpx;
  font-size:36rpx;
}
.gs_calendar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:none;
}
.gs_bg{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background-color:rgba(0,0,0,.3);
}
.gs_gs_calendar_box{
  position: absolute;
  top:180rpx;
  left:40rpx;
  width:677rpx;
  background-color:#fff;
  padding:20rpx;
  box-sizing: border-box;
}
.canlendarBgView{
  
}
.canlendarView{}
.canlendarTopView{
  overflow:hidden;
  padding:40rpx 20rpx;
  margin-left:20rpx;
}
.leftBgView{
  float:left;
  width:153rpx;
  text-align: center;
}
.leftView{
  
}
.leftView image{
  width:60rpx;
  height:60rpx;
}
.centerView{
  float:left;
  font-size:32rpx;
  height:60rpx;
  line-height:60rpx;
  width:260rpx;
  text-align: center;
}
.rightBgView{
  float:left;
  width:156rpx;
  text-align: center;
}
.rightView{}
.rightView image{
  width:60rpx;
  height:60rpx;
}
.weekBgView{
  overflow:hidden;
}
.weekView{
  float:left;
  width:14.28571428571429%;
  text-align: center;
  font-size:30rpx;
  color:#707070;
}
.dateBgView{
  overflow:hidden;
  margin-bottom:20rpx;
}
.dateEmptyView{
}
.dateView{
  display:inline-block;
  text-align: center;
  position:relative;
}
.datesView{
  font-size:30rpx;
  color:#2b2b2b;
}
.dateOn{
 border-radius: 50%;
 background-color: #53acfc;
 color: #fff !important;
}
.del{
  position:absolute;
  top:-20rpx;
  right:-20rpx;
  width:50rpx;
  height:50rpx;
  background-color:#fff;
  border-radius:50%;

}
.del image{
  width:50rpx;
  height:50rpx;
  vertical-align: text-top;
}
.clocksucceed{
  position:absolute;
  top:-3rpx;
  left:20rpx;
  background-color:#fff;
}
.clocksucceed image{
  width:50rpx;
  height:50rpx;
  vertical-align: middle;
}

index.js:

Page({

  /** 
   * 页面的初始数据
   */
  data: {
    sysW: null,
    lastDay: null,
    firstDay: null,
    year: null,
    hasEmptyGrid: false,
    cur_year: '',
    cur_month: '',
    firstDay: null,
    getDate:null,
    month:null,
    display:"none",
    week:[
      {
        wook: "一"
      }, {
        wook: "二"
      }, {
        wook: "三"
      }, {
        wook: "四"
      }, {
        wook: "五"
      }, {
        wook: "六"
      }, {
        wook: "日"
      },
    ],
    day:[
      {
        wook: '',
        src:"../../image/newspaper.png",
      }, {
        wook: ''
      }, {
        wook: ''
      }, {
        wook: ''
      }, {
        wook: ''
      }, {
        wook: ''
      },{
        wook: ''
      }
    ],
    days:[
      {
        src:"../../image/newspaper.png"
      }
    ]
  },
   getProWeekList:function(){
     let that=this
     let date=new Date()
     let dateTime = date.getTime(); // 获取现在的时间
     let dateDay = date.getDay();// 获取现在的
     let oneDayTime = 24 * 60 * 60 * 1000; //一天的时间
     let proWeekList;
     let weekday;
     console.log(dateTime)
     for (let i = 0; i < 7; i++) {
      let time = dateTime - (dateDay - 1 - i) * oneDayTime;
      proWeekList = new Date(time).getDate(); //date格式转换为yyyy-mm-dd格式的字符串
      weekday = "day[" + i+"].wook"
      that.setData({
        [weekday]: proWeekList,
      })
      //that.data.day[i].wook = new Date(time).getDate();
    }
  },
  dateSelectAction: function (e) {
    let cur_day = e.currentTarget.dataset.idx;
    this.setData({
      todayIndex: cur_day
    })
    console.log(`点击的日期:${this.data.cur_year}年${this.data.cur_month}月${cur_day + 1}日`);
  },

  setNowDate: function () {
    const date = new Date();
    const cur_year = date.getFullYear();
    const cur_month = date.getMonth() + 1;
    const todayIndex = date.getDate();
    console.log(`日期:${todayIndex}`)
    const weeks_ch = ['日', '一', '二', '三', '四', '五', '六'];
    this.calculateEmptyGrids(cur_year, cur_month);
    this.calculateDays(cur_year, cur_month);
    this.setData({
      cur_year: cur_year,
      cur_month: cur_month,
      weeks_ch,
      todayIndex,
    })
  },

  getThisMonthDays(year, month) {
    return new Date(year, month, 0).getDate();
  },
  getFirstDayOfWeek(year, month) {
    return new Date(Date.UTC(year, month - 1, 1)).getDay();
  },
  calculateEmptyGrids(year, month) {
    const firstDayOfWeek = this.getFirstDayOfWeek(year, month);
    let empytGrids = [];
    if (firstDayOfWeek > 0) {
      for (let i = 0; i < firstDayOfWeek; i++) {
        empytGrids.push(i);
      }
      this.setData({
        hasEmptyGrid: true,
        empytGrids
      });
    } else {
      this.setData({
        hasEmptyGrid: false,
        empytGrids: []
      });
    }
  },
  calculateDays(year, month) {
    let days = [];
    let weekday;
    const thisMonthDays = this.getThisMonthDays(year, month);

    for (let i = 1; i <= thisMonthDays; i++) {
      // days[i].push(i);
      weekday = "days[" + (i - 1) + "].item"
      this.setData({
        [weekday]:i,
        src:''
      })
    }

    
    console.log(this.data.days)
  },
  handleCalendar(e) {
    const handle = e.currentTarget.dataset.handle;
    const cur_year = this.data.cur_year;
    const cur_month = this.data.cur_month;

     this.setData({
       days:[]
     })

    if (handle === 'prev') {
      let newMonth = cur_month - 1;
      let newYear = cur_year;
      if (newMonth < 1) {
        newYear = cur_year - 1;
        newMonth = 12;
      }

      this.calculateDays(newYear, newMonth);
      this.calculateEmptyGrids(newYear, newMonth);

      let firstDay = new Date(newYear, newMonth - 1, 1);
      this.data.firstDay = firstDay.getDay();
      this.setData({
        cur_year: newYear,
        cur_month: newMonth,
        marLet: this.data.firstDay
      })
      if (this.data.month == newMonth) {
        this.setData({
          judge: 1
        })
      } else {
        this.setData({
          judge: 0
        })
      }
    } else {
      let newMonth = cur_month + 1;
      let newYear = cur_year;
      if (newMonth > 12) {
        newYear = cur_year + 1;
        newMonth = 1;
      }

      this.calculateDays(newYear, newMonth);
      this.calculateEmptyGrids(newYear, newMonth);
      let firstDay = new Date(newYear, newMonth - 1, 1);
      this.data.firstDay = firstDay.getDay();
      this.setData({
        cur_year: newYear,
        cur_month: newMonth,
        marLet: this.data.firstDay
      })
      if (this.data.month == newMonth){
        this.setData({
          judge:1
        })
      }else{
        this.setData({
          judge: 0
        })
      }
    }
  },
  dataTime: function () {
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth();
    var months = date.getMonth() + 1;

    //获取现今年份
    this.data.year = year;

    //获取现今月份
    this.data.month = months;

    //获取今日日期
    this.data.getDate = date.getDate();

    //最后一天是几号
    var d = new Date(year, months, 0);
    this.data.lastDay = d.getDate();

    //第一天星期几
    let firstDay = new Date(year, month, 1);
    this.data.firstDay = firstDay.getDay();
  },
  onshow:function(){
    this.setData({
      display:"block",
    })
  },
  onhide:function(){
    this.setData({
      display: "none",
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    this.setNowDate();
    this.getProWeekList()

    this.dataTime();
    var res = wx.getSystemInfoSync();
    this.setData({
      sysW: res.windowHeight / 12-5,//更具屏幕宽度变化自动设置宽度
      marLet: this.data.firstDay,
      getDate: this.data.getDate,
      judge:1,
      month: this.data.month,
    });

    /**
     * 获取系统信息
     */
    console.log(that.data.month)
  },
  //滑动切换
  swiperTab: function (e) {
    var that = this;
    that.setData({
      currentTab: e.detail.current
    });
  },
  //点击切换
  clickTab: function (e) {
    var that = this;
    if (this.data.currentTab === e.target.dataset.current) {
      return false;
    } else {
      that.setData({
        currentTab: e.target.dataset.current,

      })
    }
    // console.log(that.data.nubmerLength)
  },
  upper: function (e) {
    console.log(e)
  },
  lower: function (e) {
    console.log(e)
  },
  scroll: function (e) {
    console.log(e)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
图片之间的切换
Jun 26 Javascript
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
Linux下使用jq友好的打印JSON技巧分享
Nov 18 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
jQuery 控制文本框自动缩小字体填充
Jun 16 jQuery
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
jQuery使用each遍历循环的方法
Sep 19 jQuery
layUI实现列表查询功能
Jul 27 Javascript
JavaScript获取当前url路径过程解析
Dec 27 Javascript
原生js实现移动小球(碰撞检测)
Dec 17 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 #Javascript
js实现购物车商品数量加减
Sep 21 #Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 #Javascript
浅谈vue使用axios的回调函数中this不指向vue实例,为undefined
Sep 21 #Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 #Javascript
Vue+Element ui 根据后台返回数据设置动态表头操作
Sep 21 #Javascript
JS实现小米轮播图
Sep 21 #Javascript
You might like
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
php中json_decode()和json_encode()的使用方法
2012/06/04 PHP
一个简洁的PHP可逆加密函数(分享)
2013/06/06 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
php设计模式之职责链模式实例分析【星际争霸游戏案例】
2020/03/27 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
常用DOM整理
2015/06/16 Javascript
JavaScript iframe数据共享接口实现方法
2016/01/06 Javascript
使用JS代码实现点击按钮下载文件
2016/11/12 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
利用PHP实现递归删除链表元素的方法示例
2020/10/23 Javascript
[03:06]3分钟带你回顾DOTA2完美盛典&完美大师赛
2017/12/06 DOTA
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
PyQT实现多窗口切换
2018/04/20 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
基于Python的OCR实现示例
2020/04/03 Python
详解HTML5 canvas绘图基本使用方法
2018/01/29 HTML / CSS
尤为Wconcept中国官网:韩国设计师品牌服饰
2019/01/10 全球购物
大四自我鉴定范文
2013/10/06 职场文书
将相和教学反思
2014/02/04 职场文书
小学英语教学反思案例
2014/02/04 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
教师先进事迹材料
2014/12/16 职场文书
卖车协议书范文
2016/03/23 职场文书
详解Nginx启动失败的几种错误处理
2021/04/01 Servers
python中sys模块的介绍与实例
2021/04/17 Python