微信小程序以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入门教程(11) js事件处理
Jan 31 Javascript
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
jQuery EasyUI API 中文文档 - Tabs标签页/选项卡
Oct 01 Javascript
JavaScript常用的弹出广告及背投广告实现方法
Feb 06 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
vue2.0 datepicker使用方法
Feb 04 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 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
如何冲泡挂耳包咖啡?技巧是什么
2021/03/04 冲泡冲煮
thinkPHP5.0框架安装教程
2017/03/25 PHP
php5对象复制、clone、浅复制与深复制实例详解
2019/08/14 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
JAVASCRIPT keycode总结
2009/02/04 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
2013/04/25 Javascript
MyEclipse取消验证Js的两种方法
2013/11/14 Javascript
Jquery如何实现点击时高亮显示代码
2014/01/22 Javascript
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
jquery操作select大全
2014/04/25 Javascript
jquery实现无限分级横向导航菜单的方法
2015/03/12 Javascript
JavaScript中的原型prototype属性使用详解
2015/06/05 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
Node.js实现文件上传
2016/07/05 Javascript
JavaScript用200行代码制作打飞机小游戏实例
2017/06/21 Javascript
微信小程序实现滚动消息通知
2018/02/02 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
layui实现数据分页功能(ajax异步)
2019/07/27 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
[03:00]《DAC最前线》之欧美新秀VS老将
2015/02/01 DOTA
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
Matplotlib scatter绘制散点图的方法实现
2020/01/02 Python
享誉全球的多元化时尚精品购物平台:Farfetch发发奇(支持中文)
2017/08/08 全球购物
Skyscanner英国:苏格兰的全球三大领先航班搜索服务之一
2017/11/09 全球购物
网站域名和主机:Domain.com
2019/04/01 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
有abstract方法的类一定要用abstract修饰吗
2016/03/14 面试题
Java基础类库面试题
2013/09/04 面试题
体育老师的教学自我评价分享
2013/11/19 职场文书
自荐书模板
2013/12/19 职场文书
高中课程设置方案
2014/05/28 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android