首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

微信小程序实现日历签到

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 () {

  }
})

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

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

微信小程序实现日历签到

- Author -

骑驴看码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
让广告代码不再影响你的网页加载速度
Jul 07 Javascript
LazyLoad 延迟加载(按需加载)
May 31 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
JavaScript中数组的排序、乱序和搜索实现代码
Nov 30 Javascript
js实现拖拽 闭包函数详细介绍
Nov 25 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
AngularJS内置指令
Feb 04 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 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
放大器(1) DSP(2) 海燕B411(1) 车机(1) 德生(17) 修复(2) PL-365(1) 电子管(5) 接收机(2) TECSUN(1)
You might like
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
php 使用file_get_contents读取大文件的方法
2014/11/13 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
Three.js源码阅读笔记(光照部分)
2012/12/27 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
2013/11/21 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
javascript实现确定和取消提示框效果
2015/07/10 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
JavaScript的Backbone.js框架入门学习指引
2016/05/07 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
2016/05/14 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
2016/06/13 Javascript
基于vue实现多引擎搜索及关键字提示
2017/03/16 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
easyui-datagrid开发实践(总结)
2017/08/02 Javascript
jQuery实现的电子时钟效果完整示例
2018/04/28 jQuery
Angular 数据请求的实现方法
2018/05/07 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
回顾Javascript React基础
2019/06/15 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
在Python中marshal对象序列化的相关知识
2015/07/01 Python
python制作websocket服务器实例分享
2016/11/20 Python
深入理解Django自定义信号（signals)
2018/10/15 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
什么是python的列表推导式
2020/05/26 Python
浅谈python锁与死锁问题
2020/08/14 Python
kmart凯马特官网：美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
Delphi笔试题
2016/11/14 面试题
应届生服装设计自我评价
2013/09/20 职场文书
三八节标语
2014/06/27 职场文书
幼儿园教师节活动总结
2015/03/23 职场文书
第一书记观后感
2015/06/08 职场文书
想要创业，那么你做好准备了吗？
2019/07/01 职场文书