微信小程序以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 相关文章推荐
JavaScript中this关键字使用方法详解
Mar 08 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
AngularJS入门教程之Cookies读写操作示例
Nov 02 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
巧用canvas
Jan 21 Javascript
Javascript继承机制详解
May 30 Javascript
解析Angular 2+ 样式绑定方式
Jan 15 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
Angular 利用路由跳转到指定页面的指定位置方法
Aug 31 Javascript
vue cli4下环境变量和模式示例详解
Apr 09 Javascript
vue实现简易的双向数据绑定
Dec 29 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
php自定义的格式化时间示例代码
2013/12/05 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
JavaScript 中的事件教程
2007/04/05 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
JavaScript动态创建div属性和样式示例代码
2013/10/09 Javascript
JavaScript中使用arguments获得函数传参个数实例
2014/08/27 Javascript
深入理解JavaScript系列(41):设计模式之模板方法详解
2015/03/04 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
asp.net中oracle 存储过程(图文)
2015/08/12 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
2016/12/05 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
微信上传视频文件提示(推荐)
2018/11/22 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
2018/12/05 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
2019/10/26 Javascript
rhythmbox中文名乱码问题解决方法
2008/09/06 Python
Python下singleton模式的实现方法
2014/07/16 Python
python错误处理详解
2014/09/28 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
Django在pycharm下修改默认启动端口的方法
2019/07/26 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
深入浅析Python代码规范性检测
2020/07/31 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
适用于所有创业者的创业计划书
2014/02/05 职场文书
小学数学国培感言
2014/03/10 职场文书
超市促销活动总结
2014/07/01 职场文书
优秀教师推荐材料
2014/12/16 职场文书
质检员岗位职责
2015/02/03 职场文书
文明上网主题班会
2015/08/14 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python