微信小程序制作签到页面效果的代码是什么
Admin 2022-11-19 群英技术资讯 316 次浏览
今天我们来学习关于“微信小程序制作签到页面效果的代码是什么”的内容,下文有详解方法和实例,内容详细,逻辑清晰,有需要的朋友可以参考,希望大家阅读完这篇文章后能有所收获,那么下面就一起来了解一下吧。
具体内容如下
之前做了一个酒庄的小程序签到,微信小程序和公众号一起的。
wxml:
<!--pages/Calendar/Calendar.wxml--> <!-- 打卡日历页面 --> <view class='all'> <view class="bar"> <!-- 上一个月 --> <view class="previous" bindtap="handleCalendar" data-handle="prev"> <image src='../../imgs/page_account/lt.png'></image> </view> <!-- 显示年月 --> <view class="date">{{cur_year || "--"}} 年 {{cur_month || "--"}} 月</view> <!-- 下一个月 --> <view class="next" bindtap="handleCalendar" data-handle="next"> <image src='../../imgs/com_address/rt.png'></image> </view> </view> <!-- 显示星期 --> <view class="week"> <view wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view> </view> <view class='days'> <!-- 列 --> <view class="columns" wx:for="{{days.length/7}}" wx:for-index="i" wx:key="i"> <view wx:for="{{days}}" wx:for-index="j" wx:key="j"> <!-- 行 --> <view class="rows" wx:if="{{j/7 == i}}"> <view class="rows" wx:for="{{7}}" wx:for-index="k" wx:key="k"> <!-- 每个月份的空的单元格 --> <view class='cell' wx:if="{{days[j+k].date == null}}"> <text decode="{{true}}"> </text> </view> <!-- 每个月份的有数字的单元格 --> <view class='cell' wx:else> <!-- 当前日期已签到 --> <view wx:if="{{days[j+k].isSign == true}}" style='background-color:#83C75D' class='cell'> <text>{{days[j+k].date}}</text> </view> <!-- 当前日期未签到 --> <view wx:else> <text>{{days[j+k].date}}</text> </view> </view> </view> </view> </view> </view> </view> <!-- 坚持打卡天数 --> <view> <view bindtap="getSignPoint" class="count1" style="{{qdStatus}}"> <view class="">立即签到</view> </view> <view class="reward"> <view class="jsqd">在本月连续签到可获取:</view> <view class="jddetail"> <view class="redetail"> <view class="lxday">连续签到{{g_data.qd1.RES_NAME_SUB}}天</view> <view class="point">可得{{g_data.qd1.RES_CODE}}积分</view> </view> <view class="redetail"> <view class="lxday">连续签到{{g_data.qd2.RES_NAME_SUB}}天</view> <view class="point">可得{{g_data.qd2.RES_CODE}}积分</view> </view> <view class="redetail"> <view class="lxday">连续签到{{g_data.qd3.RES_NAME_SUB}}天</view> <view class="point">可得{{g_data.qd3.RES_CODE}}积分</view> </view> </view> </view> </view> <view class='count' style="{{tsStatus}}"> <text>截至目前,你已连续签到</text> <view class='daynumber'> <text class='number'>{{count}}</text> <text class='day'>天</text> </view> </view> </view>
/* pages/Calendar/Calendar.wxss */ /* 打卡日历 */ .all{ margin-top: 20rpx; } .all .bar{ display: flex; flex-direction: row; justify-content: space-between; margin: 30rpx 20rpx; padding: 10rpx; } .all .bar image{ width: 50rpx; height: 50rpx; } .all .week{ display: flex; flex-direction: row; justify-content: space-between; padding: 20px; padding-left: 16px; padding-right: 29rpx; margin: 20rpx; border-radius: 10px; background-color: #F4A460; } .all .days{ margin: 20rpx; padding: 10rpx; border-radius: 10px; background-color: #F4A460; } .all .columns{ display: flex; flex-direction: column; justify-content: space-between; } .all .columns .rows{ display: flex; flex-direction: row; justify-content: space-between; } .all .columns .rows .cell{ width: 84rpx; height: 88rpx; margin: 3rpx; text-align: center; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; } .count .daynumber{ display: flex; flex-direction: row; justify-content: center; } .count .daynumber .day{ margin-top: 50rpx; } .count{ margin: 20rpx; padding: 30rpx; display: flex; text-align: center; border-radius: 10px; flex-direction: column; justify-content: center; background-color: #F4A460; align-items: center; } .count .number{ color: red; font-size: 60rpx; background-color: #fff; width: 100rpx; height: 100rpx; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; margin: 20rpx; } .count text{ margin: 10rpx; } .count1{ margin: 20rpx; padding: 30rpx; display: flex; text-align: center; border-radius: 10px; flex-direction: column; justify-content: center; background-color: #F4A460; align-items: center; color:#fff; } .reward{ display:flex; flex-direction: column; margin-top:60rpx; height:200rpx; width:95%; border:4rpx solid #F4A460; margin:auto; } .redetail{ background-color:#FFE4B5; width:29%; margin-left:20rpx; height:100rpx; } .lxday{ font-size:30rpx; color:#D2691E; } .point{ margin-top:23rpx; font-size:20rpx; color:#D2691E; } .jsqd{ font-size:25rpx; margin:25rpx; color:#D2691E; } .jddetail{ display:flex; flex-direction: row; }
js:
import { IndexModel } from '../../routemodels/index.js' import { DialogModel } from '../../routemodels/dialog.js' const indexModel = new IndexModel() const dialogModel = new DialogModel() Page({ /** * 页面的初始数据 */ data: { objectId: '', days: [], year: [], month:[], day:[], cur_year: 0, cur_month: 0, count: 0, g_data:Object, qdStatus:"", tsStatus:"", }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { //获取当前积分签到信息 indexModel.getSignInfo().then(res=>{ if(res!=null){ this.setData({ g_data:res }) } }) //this.setData({ objectId: options.objectId }); //获取当前年月 const date = new Date(); const cur_year = date.getFullYear(); const cur_month = date.getMonth() + 1; const weeks_ch = ['日', '一', '二', '三', '四', '五', '六']; this.calculateEmptyGrids(cur_year, cur_month); this.calculateDays(cur_year, cur_month); //获取当前用户当前任务的签到状态 //this.onGetSignUp(); this.setData({ cur_year, cur_month, weeks_ch }) this.getSignUp(); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { indexModel.getSignToday().then(res => { if (res.EXEC == "1") { this.setData({ qdStatus: "display:none", tsStatus: "display:block", count: res.checkday, }) } else { this.setData({ qdStatus: "display:block", tsStatus: "display:none", }) } }) }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { }, // 获取当月共多少天 getThisMonthDays: function (year, month) { return new Date(year, month, 0).getDate() }, // 获取当月第一天星期几 getFirstDayOfWeek: function (year, month) { return new Date(Date.UTC(year, month - 1, 1)).getDay(); }, // 计算当月1号前空了几个格子,把它填充在days数组的前面 calculateEmptyGrids: function (year, month) { var that = this; //计算每个月时要清零 that.setData({ days: [] }); const firstDayOfWeek = this.getFirstDayOfWeek(year, month); if (firstDayOfWeek > 0) { for (let i = 0; i < firstDayOfWeek; i++) { var obj = { date: null, isSign: false } that.data.days.push(obj); } this.setData({ days: that.data.days }); //清空 } else { this.setData({ days: [] }); } }, // 绘制当月天数占的格子,并把它放到days数组中 calculateDays: function (year, month) { var that = this; const thisMonthDays = this.getThisMonthDays(year, month); for (let i = 1; i <= thisMonthDays; i++) { var obj = { date: i, isSign: false } that.data.days.push(obj); } this.setData({ days: that.data.days }); }, //匹配判断当月与当月哪些日子签到打卡 onJudgeSign: function () { var that = this; var signs = that.data.signUp; var daysArr = that.data.days; for (var i = 0; i < that.data.day.length; i++) { var year = that.data.year[i]; var month = that.data.month[i]; var day = that.data.day[i]; day = parseInt(day); for (var j = 0; j < daysArr.length; j++) { //年月日相同并且已打卡 if (year == that.data.cur_year && month == that.data.cur_month && daysArr[j].date == day) { daysArr[j].isSign = true; } } } that.setData({ days: daysArr }); }, // 切换控制年月,上一个月,下一个月 handleCalendar: function (e) { const handle = e.currentTarget.dataset.handle; const cur_year = this.data.cur_year; const cur_month = this.data.cur_month; if (handle === 'prev') { let newMonth = cur_month - 1; let newYear = cur_year; if (newMonth < 1) { newYear = cur_year - 1; newMonth = 12; } this.calculateEmptyGrids(newYear, newMonth); this.calculateDays(newYear, newMonth); //this.onGetSignUp(); this.setData({ cur_year: newYear, cur_month: newMonth }) this.getSignUp(); } else { let newMonth = cur_month + 1; let newYear = cur_year; if (newMonth > 12) { newYear = cur_year + 1; newMonth = 1; } this.calculateEmptyGrids(newYear, newMonth); this.calculateDays(newYear, newMonth); //this.onGetSignUp(); this.setData({ cur_year: newYear, cur_month: newMonth }) this.getSignUp(); } }, //获取当前用户该任务的签到数组 onGetSignUp: function () { var that = this; var Task_User = Bmob.Object.extend("task_user"); var q = new Bmob.Query(Task_User); q.get(that.data.objectId, { success: function (result) { that.setData({ signUp: result.get("signUp"), }); //获取后就判断签到情况 that.onJudgeSign(); }, error: function (object, error) { } }); }, getSignUp:function(){ indexModel.getSignUp(this.data.cur_year,this.data.cur_month).then(res=>{ if(res!=null){ var arr1 = []; var arr2 = []; var arr3 = []; for(var i=0;i<res.day.length;i++){ arr1[i] = res.day[i].YEAR; arr2[i] = res.day[i].MONTH; arr3[i] = res.day[i].DAYS; } this.setData({ year:arr1, month:arr2, day:arr3, }) } this.onJudgeSign(); }) }, getSignPoint:function(){ indexModel.getSignPoint().then(res=>{ if(res.returncode=="2"){ this.setData({ count: res.checkday, qdStatus:"display:none", tsStatus:"display:block", }) this.getSignUp(); dialogModel.showToastS("100-00", res.result); }else{ dialogModel.showToastS("100-00", "签到失败,请与管理员联系") } }) } })
html:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>签到</title> <style> * {margin: 0;padding: 0} #calendar {width: 90%;margin: 100px auto;overflow: hidden;padding: 20px;position: relative;margin-bottom:0px} #calendar h4 {text-align: center;margin-bottom: 10px} #calendar .a1 {position: absolute;top: 30px;left: 20px;} #calendar .a2 {position: absolute;top: 30px;right: 20px;} #calendar .week {height: 120px;line-height: 110px;margin-bottom: 30px;background-color:#F4A460;font-size:50px;border-radius: 15px;} #calendar .week li {float: left;width: 120px;height: 120px;text-align: center;list-style: none;} #calendar .dateList {overflow: hidden;clear: both;background-color:#F4A460;border-radius:15px} #calendar .dateList li {float: left;width: 120px;height: 120px;text-align: center;line-height: 110px;list-style: none;font-size:50px} #calendar .dateList .ccc {} #calendar .dateList .red {background: #83C75D;border-radius:50%;} #calendar .dateList .sun {} .all {margin:20px;} .ny {text-align:center;margin-bottom:20px;font-size:50px;} .count1 {margin:50px;padding:30px;display:flex;text-align:center;border-radius:15px;flex-direction:column;justify-content:center;background-color:#F4A460;align-items:center;color:#fff;font-size:50px;margin-top:10px;} .reward {display:flex;flex-direction:column;margin-top:30px;height:220px;width:95%;border:3px solid #F4A460;margin:auto;} .redetail {background-color:#FFE4B5;width:29%;margin-left:30px;height:100px;} .lxday {font-size:25px;color:#D2691E;} .point {margin-top:20px;font-size:25px;color:#D2691E;} .jsqd {font-size:25px;margin:24px;color:#D2691E} .jddetail{display:flex;flex-direction:row;} .count {margin:30px;padding:30px;display:flex;text-align:center;border-radius:15px;flex-direction:column;jsutify-content:center;background-color:#F4A460;align-items:center;} .number{ color: red;font-size: 40px;background-color: #fff;width: 100px;height: 100px;border-radius: 50%;display: flex;flex-direction: column;justify-content: center;margin: 20px;} .daynumber {display:flex;flex-direction:row;justify-content:center;} .day{margin-top:40px;font-size:40px;} .return{ position: absolute; margin-top: 0.15rem; } .return img{ width: 80px; } .head{ letter-spacing: 0.1rem; font-weight: bold; font-size: 50px; padding: 10px; text-align: center; background: #F5F5F5; } </style> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="../../js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="../../../../vendor/layer/layer.js"></script> <script type="text/javascript" src="../../js/public.js"></script> <script type="text/javascript" src="js/calendar.js"></script> </head> <body> <div class="return"> <a href="../index.html" rel="external nofollow" > <img src="../../image/lt.png"> </a> </div> <div class="head"> <p>签到</p> </div> <div class="all"> <div id="calendar"> <div id="ny" class="ny">2013年10月</div> <a href="##" rel="external nofollow" rel="external nofollow" class="a1"><img style="width:50px;height:50px" src="../../image/lt.png"></img></a> <a href="##" rel="external nofollow" rel="external nofollow" class="a2"><img style="wdith:50px;height:50px" src="../../image/rt.png"></img></a> <ul class="week"> <li>日</li> <li>一</li> <li>二</li> <li>三</li> <li>四</li> <li>五</li> <li>六</li> </ul> <ul class="dateList"></ul> </div> <div> <div id="ljqd"> <div class="count1" onclick="getSignPoint()"> <div>立即签到</div> </div> </div> </div> <div id="reward" class="reward"> <div class="jsqd">在本月连续签到可获取:</div> <div class="jddetail"> <div class="redetail"> <div id="lxqd1" class="lxday">连续签到7天</div> <div id="lxjf1" class="point">可得30积分</div> </div> <div class="redetail"> <div id="lxqd2" class="lxday">连续签到7天</div> <div id="lxjf2" class="point">可得30积分</div> </div> <div class="redetail"> <div id="lxqd3" class="lxday">连续签到7天</div> <div id="lxjf3" class="point">可得30积分</div> </div> </div> </div> <div id="jzmq" style="display:none" class="count"> <div style="font-size:40px;">截至目前,你已经连续签到</div> <div class="daynumber"> <div id="pcount" class="number"></div> <div class="day">天</div> </div> </div> </div> </body> </html>
js:
var arr1 = []; var arr2 = []; var arr3 = []; var iNow = 0; $(function() { initUI();// 初始化控件 initData();// 初始化数据 // 必要的数据 // 今天的年 月 日 ;本月的总天数;本月第一天是周几??? getSignToday(); getSignInfo(0); run(0); $(".a1").click(function() { iNow--; getSignInfo(iNow); }); $(".a2").click(function() { iNow++; getSignInfo(iNow); }) }); function getSignInfo(n) { $.wh_h5ajax({ url : "/api/SignIn/getSignInfo", type : "post", data : { }, dataType : "json", success : function(json) { if (json != null) { html1 = "连续签到" + json.qd1.RES_NAME_SUB + "天"; html2 = "连续签到" + json.qd2.RES_NAME_SUB + "天"; html3 = "连续签到" + json.qd3.RES_NAME_SUB + "天"; html4 = "可得" + json.qd1.RES_CODE + "积分"; html5 = "可得" + json.qd2.RES_CODE + "积分"; html6 = "可得" + json.qd3.RES_CODE + "积分"; $("#lxqd1").html(html1); $("#lxqd2").html(html2); $("#lxqd3").html(html3); $("#lxjf1").html(html4); $("#lxjf2").html(html5); $("#lxjf3").html(html6); } var oDate = new Date(); // 定义时间 oDate.setMonth(oDate.getMonth(n)); var year = oDate.getFullYear(); var month = oDate.getMonth(); getSignUp(year, month + 1); }, error : function(e) { console.log(e); } }); } function getSignUp(year, month) { $.wh_h5ajax({ url : "/api/SignIn/getSignUp", type : "post", data : { year : "" + year, month : "" + month }, dataType : "json", success : function(json) { if (json != null) { arr1 = []; arr2 = []; arr3 = []; for (var i = 0; i < json.day.length; i++) { arr1[i] = json.day[i].YEAR; arr2[i] = json.day[i].MONTH; arr3[i] = json.day[i].DAYS; } } run(iNow); } }) } function initUI() { } // 初始化数据 function initData() { } function run(n) { var oDate = new Date(); // 定义时间 oDate.setMonth(oDate.getMonth() + n);// 设置月份 var year = oDate.getFullYear(); // 年 var month = oDate.getMonth(); // 月 var today = oDate.getDate(); // 日 var alength = arr1.length; // 计算本月有多少天 var allDay = [ 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 ][month]; // 判断闰年 if (month == 1) { if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { allDay = 29; } } // 判断本月第一天是星期几 oDate.setDate(1); // 时间调整到本月第一天 var week = oDate.getDay(); // 读取本月第一天是星期几 // console.log(week); $(".dateList").empty();// 每次清空 // 插入空白 for (var i = 0; i < week; i++) { $(".dateList").append("<li></li>"); } // 日期插入到dateList for (var i = 1; i <= allDay; i++) { $(".dateList").append("<li>" + i + "</li>"); } // 标记颜色===================== for(var t=0;t<alength;t++){ if(arr1[t]==year&arr2[t]==month+1){ $(".dateList li").each(function(i, elm){ //console.log(index,elm); var val = $(this).text(); //console.log(val); if(val==arr3[t]){ $(this).addClass('red') } }); } } /* * for(var t=0;t<arr1.length;t++){ if(arr1[t]==year&&arr2[t]==month+1){ * $(".dateList li").each(function(i, elm){ var val = $(this).text(); * if(arr3[t]==val){ $(this).addClass('red'); } }); } * } */ // 定义标题日期 $("#ny").text(year + "年" + (month + 1) + "月"); } function getSignPoint(){ $.wh_h5ajax({ url : "/api/SignIn/getPoint", type : "post", data : { }, dataType : "json", success : function(json) { if(json.returncode=="2"){ document.getElementById("ljqd").style = "display:none"; document.getElementById("reward").style = ""; document.getElementById("jzmq").style = ""; $("#pcount").html(json.checkday) getSignInfo(); $.wh_layermsg(json.result); }else{ $.wh_layermsg("签到失败,请与管理员联系"); } } }) } function getSignToday(){ $.wh_h5ajax({ url : "/api/SignIn/getSignToday", type : "post", data : { }, dataType : "json", success : function(json) { if (json.EXEC == "1") { document.getElementById("ljqd").style = "display:none"; document.getElementById("reward").style = ""; document.getElementById("jzmq").style = ""; $("#pcount").html(json.checkday) } else { document.getElementById("ljqd").style = ""; document.getElementById("reward").style = ""; document.getElementById("jzmq").style = "display:none"; } } }) }
大概是这个样子
代码还有很多需要修改,先在这放一下吧。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
这篇文章主要讲解Vue3 集成HTTP库axios的相关内容,本文讲围绕如何利用Vue3 集成HTTP库axios的相关资料展开文章,需要的朋友可以参考一下,希望对你有所帮助
用JavaScript怎样做点击显示隐藏的效果?点击显示或者点击隐藏效果的应用场景有很多,例如导航菜单,图片展示等等,因此本文就给大家分享一下如何实现简单的点击显示隐藏,实现效果及代码如下:
这篇我们来了解Node.js中puppeteer库如何安装和使用,以及能用做什么?文中的介绍很详细,有具体示例供大家参考,对大家学习和了解puppeteer库的使用有帮助,感兴趣的朋友就继续往下看吧。
async 是“异步”的简写,async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成,await 只能出现在 async 函数中。
许多朋友遇到React Native 无法链接模拟器的问题,怎么解决呢,本文给大家分享完整简便解决方法及配置例题,对React Native 链接模拟器相关知识感兴趣的朋友一起看看吧
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008