微信小程序以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 相关文章推荐
multiSteps 基于Jquery的多步骤滑动切换插件
Jul 22 Javascript
js异常捕获方法介绍
Apr 10 Javascript
js去除空格的12种实用方法
Nov 08 Javascript
Javascript基础教程之数据类型转换
Jan 18 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
Jquery UI实现一次拖拽多个选中的元素操作
Dec 01 Javascript
JS 拦截全局ajax请求实例解析
Nov 29 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
Bootstrap模态框案例解析
Mar 05 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
Jul 21 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
浅谈Vue使用Cascader级联选择器数据回显中的坑
Oct 31 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
删除无限级目录与文件代码共享
2006/07/12 PHP
PHP5.0对象模型探索之抽象方法和抽象类
2006/09/05 PHP
php魔术方法与魔术变量、内置方法与内置变量的深入分析
2013/06/03 PHP
PHP中将ip地址转成十进制数的两种实用方法
2013/08/15 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
Laravel 5 框架入门(一)
2015/04/09 PHP
js限制文本框为整数和货币的函数代码
2010/10/13 Javascript
如何将网页表格内容导入excel
2014/02/18 Javascript
JavaScript测试工具之Karma-Jasmine的安装和使用详解
2015/12/03 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
AngularJS 自定义指令详解及示例代码
2016/08/17 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
脚手架vue-cli工程webpack的基本用法详解
2018/09/29 Javascript
深入理解react 组件类型及使用场景
2019/03/07 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
Python lambda和Python def区别分析
2014/11/30 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
Python2.7实现多进程下开发多线程示例
2019/05/31 Python
使用NumPy读取MNIST数据的实现代码示例
2019/11/20 Python
python实现四人制扑克牌游戏
2020/04/22 Python
分享29个基于Bootstrap的HTML5响应式网页设计模板
2015/11/19 HTML / CSS
澳大利亚最好的电动自行车:Leon Cycle
2020/12/19 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
电子信息专业学生自荐信
2013/11/09 职场文书
保安员岗位职责
2013/11/17 职场文书
国旗下的演讲稿
2014/05/08 职场文书
小学生民族团结演讲稿
2014/08/27 职场文书
社区护士演讲稿
2014/08/27 职场文书
住宿生擅自离校检讨书
2014/09/22 职场文书
退学证明范本3篇
2014/10/29 职场文书
诺贝尔奖获得者名言100句:句句启人心智,值永久收藏
2019/08/09 职场文书
那些美到让人窒息的诗句,值得你收藏!
2019/08/20 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript