首页
所有分类
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 相关文章推荐
jqeury eval将字符串转换json的方法
Jan 20 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
jQuery+PHP+MySQL实现无限级联下拉框效果
Feb 19 Javascript
总结jQuery插件开发中的一些要点
May 16 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
Nov 21 Javascript
bootstrap精简教程_动力节点Java学院整理
Jul 14 Javascript
微信JSSDK调用微信扫一扫功能的方法
Jul 25 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
Dec 29 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
ajax与jsonp的区别及用法
Oct 16 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
dataBinding(1) BottomSheetDialog(1) Windows Server 2022(3) 反射(1) Quartz(1) RestTemplate(1) Hive(5) ip2region(1) HttpClient(1) 注解(1)
You might like
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
在JavaScript中重写jQuery对象的方法实例教程
2014/08/25 Javascript
Javascript冒泡排序算法详解
2014/12/03 Javascript
jQuery使用addClass()方法给元素添加多个class样式
2015/03/26 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
JS中split()用法（将字符串按指定符号分割成数组）
2016/10/24 Javascript
浅析jQuery操作select控件的取值和设值
2016/12/07 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
详解vue-cli + webpack 多页面实例应用
2017/04/25 Javascript
跨域解决之JSONP和CORS的详细介绍
2018/11/21 Javascript
关于Vue源码vm.$watch()内部原理详解
2019/04/26 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
javascript实现一款好看的秒表计时器
2020/09/05 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
2020/09/08 Javascript
JavaScript语法约定和程序调试原理解析
2020/11/03 Javascript
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
Python常见工厂函数用法示例
2018/03/21 Python
django项目搭建与Session使用详解
2018/10/10 Python
使用Python的toolz库开始函数式编程的方法
2018/11/15 Python
解决Python3下map函数的显示问题
2019/12/04 Python
Python中bisect的用法及示例详解
2020/07/20 Python
Java 中访问数据库的步骤？Statement 和PreparedStatement 之间的区别？
2012/06/05 面试题
简单说下OSPF的操作过程
2014/08/13 面试题
制衣厂各岗位职责
2013/12/02 职场文书
教师师德承诺书
2014/03/26 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
啦啦队口号大全
2014/06/16 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
感恩教育主题班会
2015/08/12 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis