找回密码
 立即注册

QQ登录

只需一步,快速开始

[Demo源码] 微信小程序日历签到功能demo

  [复制链接]
查看: 4180|回复: 71
最佳答案
0 

5

主题

5

帖子

91

积分

新人求带

积分
91
 楼主| 发表于 2017-2-8 16:28:07 | 显示全部楼层 |阅读模式
如下图所示:
35.png

源码如下
js:
  1. //index.js
  2. //获取应用实例
  3. var app = getApp();
  4. var calendarSignData;
  5. var date;
  6. var calendarSignDay;
  7. Page({
  8.   //事件处理函数
  9.   calendarSign: function() {
  10.    calendarSignData[date]=date;
  11.     console.log(calendarSignData);
  12.     calendarSignDay=calendarSignDay+1;
  13.    wx.setStorageSync("calendarSignData",calendarSignData);
  14.    wx.setStorageSync("calendarSignDay",calendarSignDay);

  15.    wx.showToast({
  16.   title: '签到成功',
  17.   icon: 'success',
  18.   duration: 2000
  19. })
  20.   this.setData({
  21.       
  22.         calendarSignData:calendarSignData,
  23.         calendarSignDay:calendarSignDay
  24.       })
  25.   },
  26.   onLoad: function () {
  27.     var mydate=new Date();
  28.     var year=mydate.getFullYear();
  29.     var month=mydate.getMonth()+1;
  30.     date=mydate.getDate();
  31.     console.log("date"+date)
  32.     var day=mydate.getDay();
  33.     console.log(day)
  34.     var nbsp=7-((date-day)%7);
  35.     console.log("nbsp"+nbsp);
  36.     var monthDaySize;
  37.     if(month==1||month==3||month==5||month==7||month==8||month==10||month==12){
  38.       monthDaySize=31;
  39.     }else if(month==4||month==6||month==9||month==11){
  40.       monthDaySize=30;
  41.     }else if(month==2){
  42.        // 计算是否是闰年,如果是二月份则是29天
  43.       if((year-2000)%4==0){
  44.         monthDaySize=29;
  45.       }else{
  46.         monthDaySize=28;
  47.       }
  48.     };
  49.     // 判断是否签到过
  50.     if(wx.getStorageSync("calendarSignData")==null||wx.getStorageSync("calendarSignData")==''){
  51.       wx.setStorageSync("calendarSignData",new Array(monthDaySize));
  52.     };
  53.      if(wx.getStorageSync("calendarSignDay")==null||wx.getStorageSync("calendarSignDay")==''){
  54.       wx.setStorageSync("calendarSignDay",0);
  55.     }
  56.      calendarSignData=wx.getStorageSync("calendarSignData")
  57.       calendarSignDay=wx.getStorageSync("calendarSignDay")
  58.     console.log(calendarSignData);
  59.     console.log(calendarSignDay)
  60.     this.setData({
  61.         year:year,
  62.         month:month,
  63.         nbsp:nbsp,
  64.         monthDaySize:monthDaySize,
  65.         date:date,
  66.         calendarSignData:calendarSignData,
  67.         calendarSignDay:calendarSignDay
  68.       })
  69.   }
  70. })
复制代码

wxml:

  1. <!--index.wxml-->
  2. <view class="calendar">
  3.   <view class="time">
  4.     <view>
  5.       <text class="t_blue">{{year}}</text>年
  6.       <text class="t_blue">{{month}}</text>月
  7.     </view>
  8.     <view style="text-align: right;">
  9.       本月已签到
  10.       <text class="t_red">{{calendarSignDay}}</text>天
  11.     </view>
  12.   </view>
  13.   <view class="weekName">
  14.     <view class="sunday">日</view>
  15.     <view class="monday">一</view>
  16.     <view class="tuesday">二</view>
  17.     <view class="wednesday">三</view>
  18.     <view class="thursday">四</view>
  19.     <view class="friday">五</view>
  20.     <view class="saturday">六</view>
  21.   </view>
  22.   <view class="week">

  23.     <!--填补空格-->
  24.     <view wx:for="{{nbsp}}">\n</view>

  25.     <!--开心循环日期-->
  26.     <view wx:for="{{date-1}}" style="color:gainsboro;">
  27.       <text wx:if="{{item+1==calendarSignData[item+1]}}" style="color:red;font-size:22rpx;">已签到</text>
  28.       <text wx:else="">{{item+1}}</text>
  29.     </view>
  30.     <view style="border-bottom: 1px solid blue; padding-bottom:8rpx;">
  31.       <text wx:if="{{date==calendarSignData[date]}}" style="color:red;font-size:22rpx;  border-radius: 50%;background-color: ghostwhite">已签到</text>
  32.       <text wx:else="" style="color:blue;">{{date}}</text>
  33.     </view>
  34.     <view wx:for="{{monthDaySize-date}}">{{item+date+1}}</view>
  35.   </view>
  36.   <view class="calendarSign">
  37.     <button wx:if="{{date!=calendarSignData[date]}}" style="color:white;background-color:blue;" bindtap="calendarSign">签到</button>
  38.     <button wx:else="">今日已签到</button>
  39.   </view>
  40. </view>
复制代码

wxss:
  1. /**index.wxss**/
  2. .t_red{
  3.   color: red;
  4. }
  5. .t_blue{
  6.   color: royalblue;
  7. }
  8. .calendar{

  9.   margin: 0 1vw;
  10. }
  11. .time{
  12.   padding: 16rpx 20rpx;
  13.   background-color: wheat;
  14.   display: flex;
  15. }
  16. .time view{
  17.   flex: 1;
  18.   font-size: 30rpx;

  19. }
  20. .time view text{
  21.   font-size: 38rpx;
  22. }
  23. .weekName{
  24.    background-color: gainsboro;
  25.   width: 100%;
  26.   display: flex;
  27.   padding: 16rpx 0;
  28. }
  29. .weekName view{
  30.   flex: 1;
  31.   text-align: center;
  32. }
  33. .sunday,.saturday{
  34.   color: red;
  35. }
  36. .week{
  37.   width: 100%;
  38. }
  39. .week view{
  40.   width: 14.2%;
  41.   height: 80rpx;
  42.   line-height: 80rpx;
  43.   display: inline-block;
  44.   margin: 20rpx 0;
  45.   text-align: center;
  46. }
  47. .week view text{
  48.   width: 100%;
  49.   height: 100%;

  50.   display: inline-block;
  51. }
  52. .calendarSign{
  53.   margin: 20rpx;
  54. }
复制代码

游客,如果您要查看本帖隐藏内容请回复
回复

使用道具 举报

最佳答案
0 

0

主题

22

帖子

49

积分

新人求带

积分
49
发表于 2017-2-9 10:19:42 | 显示全部楼层
留名学习
回复

使用道具 举报

最佳答案
0 

0

主题

19

帖子

263

积分

新人求带

积分
263
发表于 2017-2-9 14:07:29 | 显示全部楼层
厉害了。。。。。。。。。。
回复

使用道具 举报

最佳答案
2 

7

主题

197

帖子

2677

积分

专家路上

积分
2677
发表于 2017-2-9 14:48:23 | 显示全部楼层

厉害了。。。。。。。。。
回复

使用道具 举报

最佳答案
0 

0

主题

7

帖子

126

积分

新人求带

积分
126
发表于 2017-2-10 12:55:25 | 显示全部楼层
aaaaaaaaaaaaaaaaaaaaa
回复 支持 反对

使用道具 举报

最佳答案
0 

1

主题

24

帖子

962

积分

专家路上

积分
962
发表于 2017-2-14 14:06:46 | 显示全部楼层
看看看看
回复

使用道具 举报

最佳答案
0 

0

主题

16

帖子

47

积分

新人求带

积分
47
发表于 2017-2-14 15:01:06 | 显示全部楼层
回复

使用道具 举报

最佳答案
0 

0

主题

23

帖子

670

积分

专家路上

积分
670
发表于 2017-2-17 12:17:38 | 显示全部楼层
支持一下
回复

使用道具 举报

最佳答案
0 

0

主题

2

帖子

48

积分

新人求带

积分
48
发表于 2017-2-18 13:03:42 | 显示全部楼层
mark!mark!
回复

使用道具 举报

最佳答案
0 

0

主题

2

帖子

48

积分

新人求带

积分
48
发表于 2017-2-23 15:04:10 | 显示全部楼层
看看这是什么
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


易域网-您身边的域名管家

henkuai.com是专业的第三方微信开发者平台,为生态而生。


本站为第三方微信开发者平台,非腾讯官方网站。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

欢迎来这里一起喝喝茶,
聊聊你的产品。

微信公众号gongzhongkaifa

工作日12小时内回复。

网站业务
zhongcong@henkuai.com

工作日12小时内回复。

市场合作
songchang@henkuai.com