微信小程序以7天为周期连续签到7天功能效果的示例代码


Posted in Javascript onAugust 20, 2020

此功能以1,2,3,4,5,6,7这样为一周期,连续签到的功能;
通过计算是否为整除7天计算,每7天后切换数目,从而改变周期表、

本案例只是提供案例的基本操作,进一步涉及:每日用户集的监听(日历表,签到统计,连续签到,签到中断,后端数据处理)等等功能需自行在搞掂哈~

如果图如下:

微信小程序以7天为周期连续签到7天功能效果的示例代码微信小程序以7天为周期连续签到7天功能效果的示例代码

wxml结构

<!--pages/signIn/signIn.wxml-->
<view class='signIn'>
 <view class='sign-com'>
 <view class='thead'>
 <view class='tt'>已连续签到</view>
 <view class='mm'><label class='n'>{{signNum}}</label>天</view>
 <view class='pp'>连续签到7日后每日得3分</view>
 </view>
 <view class='modle'>
 <view class='mol'>
 <view class='mol-line'></view>
 <view class='mol-ites'>
 <view class="ite {{signNum>=min?'hover':''}}" data-n='{{min}}'>
 <label class='n'>+{{min<7?1:3}}</label>
 </view>
 <view class="ite {{signNum>=min+1?'hover':''}}" data-n='{{min+1}}'>
 <label class='n'>+{{min+1<7?1:3}}</label>
 </view>
 <view class="ite {{signNum>=min+2?'hover':''}}" data-n='{{min+2}}'>
 <label class='n'>+{{min+2<7?1:3}}</label>
 </view>
 <view class="ite {{signNum>=min+3?'hover':''}}" data-n='{{min+3}}'>
 <label class='n'>+{{min+3<7?1:3}}</label>
 </view>
 <view class="ite {{signNum>=min+4?'hover':''}}" data-n='{{min+4}}'>
 <label class='n'>+{{min+4<7?1:3}}</label>
 </view>
 <view class="ite {{signNum>=min+5?'hover':''}}" data-n='{{min+5}}'>
 <label class='n'>+{{min+5<7?1:3}}</label>
 </view>
 <view class="ite {{signNum>=min+6?'hover':''}}" data-n='{{max}}'>
 <label class='n'>+{{min+6<7?1:3}}</label>
 </view>
 </view>
 </view>
 <view class='moday'>
 <label class='dd'>{{min}}天</label>
 <label class='dd'>{{min+1}}天</label>
 <label class='dd'>{{min+2}}天</label>
 <label class='dd'>{{min+3}}天</label>
 <label class='dd'>{{min+4}}天</label>
 <label class='dd'>{{min+5}}天</label>
 <label class='dd'>{{max}}天</label>
 </view>
 </view>

 <view class='the-btn'>
 <button type='button' class='btn' bindtap='bindSignIn' data-num="{{signNum}}" disabled='{{signState}}'
 data-min="{{min}}" data-max="{{max}}" data-be="{{be}}"
 >签到</button>
 </view>
 </view>
</view>

<view class='explax'>
 <view class=''>日期开始:{{min}} </view>
 <view class=''>日期结束:{{max}} </view>
 <view class=''>签到数:{{signNum}}天</view>
 <view class=''>切换周期的倍数:{{be}}</view>
</view>

js功能

// pages/signIn/signIn.js
//获取应用实例
const app = getApp();

Page({

 /**
 * 页面的初始数据
 */
 data: {
 //img_url: config.imgUrl, //图片地址

 //签到模块
 signNum: 0, //签到数
 signState: false, //签到状态
 min: 1, //默认值日期第一天1
 max: 7, //默认值日期最后一天7
 be: 0 //默认倍数


 },

 //签到
 bindSignIn(e) {
 var that = this,
 num = e.currentTarget.dataset.num;
 num++
 wx.showToast({
 icon: 'success',
 title: '签到成功',
 })
 that.setData({
 signNum: num,
 //signState: true
 })

 var min = e.currentTarget.dataset.min,
 max = e.currentTarget.dataset.max,
 be = e.currentTarget.dataset.be;

 if (num % 7 == 0) {
 be += 1;
 that.setData({
 be: be
 })
 }

 if (num == 7 * be + 1) {
 that.setData({
 min: 7 * be + 1,
 max: 7 * be + 7
 })
 }

 },


})

有什么错误或优化的地方,可以提出来,大家一起学习研究…

完整案例可访问本人github:https://github.com/xiexikang/xcx-signIn

参考:

到此这篇关于微信小程序以7天为周期连续签到7天功能效果的示例代码的文章就介绍到这了,更多相关微信小程序连续签到7天内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JQuery实现自定义对话框的代码
Jun 15 Javascript
自写的jQuery异步加载数据添加事件
May 15 Javascript
JavaScript保留关键字汇总
Dec 01 Javascript
bootstrap布局中input输入框右侧图标点击功能
May 16 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
Nov 28 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
微信小程序多张图片上传功能
Jun 07 Javascript
简单的Vue SSR的示例代码
Jan 12 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
vue 使用高德地图vue-amap组件过程解析
Sep 07 Javascript
vue+element实现图片上传及裁剪功能
Jun 29 Javascript
微信小程序连续签到7天积分获得功能的示例代码
Aug 20 #Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 #Javascript
JavaScript 空间坐标的使用
Aug 19 #Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
Aug 19 #Javascript
jQuery实现评论模块
Aug 19 #jQuery
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 #Javascript
jQuery实现简单评论功能
Aug 19 #jQuery
You might like
php 方便水印和缩略图的图形类
2009/05/21 PHP
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
php中的抽象方法和抽象类
2017/02/14 PHP
php处理静态页面:页面设置缓存时间实例
2017/06/22 PHP
一段实时更新的时间代码
2006/07/07 Javascript
用javascript实现页面打印的三种方法
2007/03/05 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
jQuery替换字符串(实例代码)
2013/11/13 Javascript
原生Js实现简易烟花爆炸效果的方法
2015/03/20 Javascript
javascript中callee与caller的区别分析
2015/04/20 Javascript
使用struts2+Ajax+jquery验证用户名是否已被注册
2016/03/22 Javascript
JavaScript定义数组的三种方法(new Array(),new Array('x','y')
2016/10/04 Javascript
jQuery Checkbox 全选 反选的简单实例
2016/11/29 Javascript
简单的JS控制button颜色随点击更改的实现方法
2017/04/17 Javascript
node事件循环和process模块实例分析
2020/02/14 Javascript
vue使用axios实现excel文件下载的功能
2020/07/16 Javascript
解决vue-router 切换tab标签关闭时缓存问题
2020/07/22 Javascript
js数组的基本使用总结
2021/01/18 Javascript
[01:33]一分钟玩转DOTA2第三弹:DOTA2&DotA快捷操作大对比
2014/06/04 DOTA
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
一个基于flask的web应用诞生 bootstrap框架美化(3)
2017/04/11 Python
简述Python2与Python3的不同点
2018/01/21 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
python opencv 简单阈值算法的实现
2019/08/04 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
利用python在大量数据文件下删除某一行的例子
2019/08/21 Python
TensorFlow 显存使用机制详解
2020/02/03 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
如何把python项目部署到linux服务器
2020/08/26 Python
购买瑞典当代设计的腕表和太阳眼镜:TRIWA
2016/10/30 全球购物
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
乔迁宴答谢词
2014/01/21 职场文书
青春励志演讲稿
2014/04/29 职场文书
《夜莺的歌声》教学反思
2016/02/22 职场文书