微信小程序以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 相关文章推荐
js检测客户端不是firefox则提示下载
Apr 07 Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
Nov 05 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
JS实现标签页切换效果
May 04 Javascript
Vue.js使用$.ajax和vue-resource实现OAuth的注册、登录、注销和API调用
May 10 Javascript
微信小程序实现滑动删除效果
May 19 Javascript
详解Require.js与Sea.js的区别
Aug 05 Javascript
js变量值传到php过程详解 将php解析成数据
Jun 26 Javascript
如何在 Vue 中使用 JSX
Feb 14 Vue.js
微信小程序连续签到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
一个多文件上传的例子(原创)
2006/10/09 PHP
JpGraph php柱状图使用介绍
2011/08/23 PHP
PHP中imagick函数的中文解释
2015/01/21 PHP
php+ajax实现的点击浏览量加1
2015/04/16 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
一个符号插入器 中用到的js代码
2007/09/04 Javascript
基于jquery的表格排序
2010/09/11 Javascript
js实现左侧网页tab滑动门效果代码
2015/09/06 Javascript
简单理解Vue条件渲染
2016/12/03 Javascript
jQuery实现按比例缩放图片的方法
2017/04/29 jQuery
Vue中的数据监听和数据交互案例解析
2017/07/12 Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
2018/05/08 Javascript
详解使用mpvue开发github小程序总结
2018/07/25 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
javascript利用键盘控制小方块的移动
2020/04/20 Javascript
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
浅谈python 里面的单下划线与双下划线的区别
2017/12/01 Python
pandas.DataFrame.to_json按行转json的方法
2018/06/05 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
python程序输出无内容的解决方式
2020/04/09 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
keras实现图像预处理并生成一个generator的案例
2020/06/17 Python
Python 高效编程技巧分享
2020/09/10 Python
使用python爬取抖音app视频的实例代码
2020/12/01 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
美国购买当代和现代家具网站:MODTEMPO
2018/07/20 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
Python里面如何实现tuple和list的转换
2012/06/13 面试题
办公室内勤工作职责
2013/12/11 职场文书
大学辅导员事迹材料
2014/02/05 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
主要领导对照检查材料
2014/08/26 职场文书
离婚起诉书范本
2015/05/18 职场文书
Java由浅入深通关抽象类与接口(下篇)
2022/04/26 Java/Android