微信小程序实现日历签到功能_javascript技巧_

                                                  {{year}}年{{month}}月                                                                    {{item}}                                                                                                                            {{item.dateNum}}                                                                                         立即签到                        立即签到     本月累计签到X次     未签到X次

/* pages/signin/signin.wxss */ /* 日历 */ .contant {   background: #fff;   padding-bottom: 30rpx; } .calendar_title {   color: #fff;   padding: 30rpx 0;   box-sizing: border-box; } .calendar_title .icon {   width: 60rpx;   height: 60rpx;   font-size: 0; } .icon image {   width: 100%;   height: 100%; } .nowDtae {   color: #4aa0ff;   margin: 0 20rpx; } /* 日历 */ .calendar {   width: 100%;   background: #4aa0ff;   opacity: .8;   border-radius: 20rpx;   padding: 0 0 20rpx; } .header {   font-size: 0;   width: 100%;   margin: 0 auto; } .header>view {   display: inline-block;   width: 14.285%;   color: #fff;   font-size: 30rpx;   text-align: center;   border-bottom: 1px solid #D0D0D0;   padding: 20rpx 0; } .weekMark {   position: relative;   width: 80%;   margin: 0 auto; } .weekMark view {   position: absolute;   bottom: 0;   left: 0;   width: 100%;   border-bottom: 2px solid #69f; } .date-box {   padding: 10rpx 0;   width: 100%;   margin: 0 auto; } .date-box>view {   position: relative;   display: inline-block;   width: 14.285%;   color: #666;   text-align: center;   vertical-align: middle; } .date-head {   height: 60rpx;   line-height: 60rpx;   color: #fff; } .nowDay .date-head {   width: 60rpx;   border-radius: 50%;   text-align: center;   color: #fff;   background-color: #ff9933;   margin: 0 auto; } .nowsDay .date-head{   width: 60rpx;   border-radius: 50%;   text-align: center;   color: #fff;   background-color: #47c46d;   margin: 0 auto; } /* 签到 */ .center {   background: #fff;   padding: 80rpx 0;   box-sizing: border-box;   margin: 20rpx 0; } .center_text {   margin-top: 20rpx;   color: #4aa0ff; } .center_texts{   color: #999999; } .bottom_text {   font-weight: normal;   line-height: 60rpx; } .bottom_text text {   color: #66afff; } .bottom {   background: #fff;   padding: 60rpx 0;   box-sizing: border-box; }

// pages/signin/signin.js import $ from '../../utils/fun.js' const app = getApp(); Page({   /**    * 页面的初始数据    */   data: {     // 日历     year: 0,     month: 0,     date: ['日', '一', '二', '三', '四', '五', '六'],     dateArr: [],     isToday: 0,     isTodayWeek: false,     todayIndex: 0,     // 当前维度     latitude: "",     // 当前精度     longitude: "",     yesDate: [20200501, 20200511, 20200512, 20200508],  //此处应该是接口返回的数据，先模拟了一个     signinNow: false   },   // 签到   signIn() {     let t = this;     t.getLocation();   },   // 获取用户当前地理位置   getLocation() {     let t = this;     wx.getLocation({       type: 'wgs84',       success: (res) => {         var latitude = res.latitude         var longitude = res.longitude         t.setData({           latitude: latitude,           longitude: longitude         });         t.activeSign()       }     })   },   // 是否可以签到   activeSign() {     let t = this;     let nowdate = t.data.isToday;     let dateArr = t.data.dateArr;     let yesDate = t.data.yesDate;     for (var i = 0; i < dateArr.length; i++) {       if (dateArr[i].isToday == nowdate) {         dateArr[i].choose = true;         yesDate.push(nowdate);         $.successToast("签到成功")         t.setData({           signinNow: true,           yesDate: yesDate         })       }     };     t.setData({       dateArr: dateArr     })   },   // 签到过   alreadySign() {     $.toast("今天已经签过到啦~")   },   // 已签到日期   yesdate() {     let t = this;     let yesdate = t.data.yesDate;     let dateArr = t.data.dateArr;     for (var i = 0; i < dateArr.length; i++) {       for (var j = 0; j < yesdate.length; j++) {         if (dateArr[i].isToday == yesdate[j]) {           dateArr[i].choose = true;         }       };     }     t.setData({       dateArr: dateArr     })   },   // 日历   dateInit: function (setYear, setMonth) {     let t = this;     //全部时间的月份都是按0~11基准，显示月份才+1     let dateArr = []; //需要遍历的日历数组数据     let arrLen = 0; //dateArr的数组长度     let now = setYear ? new Date(setYear, setMonth) : new Date();     let year = setYear || now.getFullYear();     let nextYear = 0;     let month = setMonth || now.getMonth() //没有+1方便后面计算当月总天数     let nextMonth = (month + 1) > 11 ? 1 : (month + 1);     let startWeek = new Date(year + ',' + (month + 1) + ',' + 1).getDay(); //目标月1号对应的星期     let dayNums = new Date(year, nextMonth, 0).getDate(); //获取目标月有多少天     let obj = {};     let num = 0;     if (month + 1 > 11) {       nextYear = year + 1;       dayNums = new Date(nextYear, nextMonth, 0).getDate();     }     arrLen = startWeek + dayNums;     for (let i = 0; i < arrLen; i++) {       if (i >= startWeek) {         num = i - startWeek + 1 < 10 ? '0' + String(i - startWeek + 1) : String(i - startWeek + 1);         obj = {           isToday: '' + year + ((month + 1) < 10 ? "0" + (month + 1) : (month + 1)) + num,           dateNum: num,           weight: 5,           choose: false         }       } else {         obj = {};       }       dateArr[i] = obj;     }     t.setData({       dateArr: dateArr     })     let nowDate = new Date();     let nowYear = nowDate.getFullYear();     let nowMonth = nowDate.getMonth() + 1 < 10 ? '0' + (nowDate.getMonth() + 1) : (nowDate.getMonth() + 1);     let nowWeek = nowDate.getDay();     let getYear = setYear || nowYear;     let getMonth = setMonth >= 0 ? (setMonth + 1) : nowMonth;     if (nowYear == getYear && nowMonth == getMonth) {       t.setData({         isTodayWeek: true,         todayIndex: nowWeek       })     } else {       t.setData({         isTodayWeek: false,         todayIndex: -1       })     };   },   /**    * 上月切换    */   lastMonth: function () {     let t = this;     //全部时间的月份都是按0~11基准，显示月份才+1     let year = t.data.month - 2 < 0 ? t.data.year - 1 : t.data.year;     let month = t.data.month - 2 < 0 ? 11 : t.data.month - 2;     t.setData({       year: year,       month: (month + 1)     })     t.dateInit(year, month);     t.yesdate()   },   /**    * 下月切换    */   nextMonth: function () {     let t = this;     //全部时间的月份都是按0~11基准，显示月份才+1     let year = t.data.month > 11 ? t.data.year + 1 : t.data.year;     let month = t.data.month > 11 ? 0 : t.data.month;     t.setData({       year: year,       month: (month + 1)     })     t.dateInit(year, month);     t.yesdate()   },   /**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {     let t = this;     let now = new Date();     let year = now.getFullYear();     let month = now.getMonth() + 1 < 10 ? "0" + String(now.getMonth() + 1) : now.getMonth() + 1;     t.dateInit();     t.setData({       year: year,       month: Number(month),       isToday: '' + year + month + now.getDate()     });     t.yesdate()   },   /**    * 生命周期函数--监听页面初次渲染完成    */   onReady: function () {   },   /**    * 生命周期函数--监听页面显示    */   onShow: function () {   },   /**    * 生命周期函数--监听页面隐藏    */   onHide: function () {   },   /**    * 生命周期函数--监听页面卸载    */   onUnload: function () {   },   /**    * 页面相关事件处理函数--监听用户下拉动作    */   onPullDownRefresh: function () {   },   /**    * 页面上拉触底事件的处理函数    */   onReachBottom: function () {   },   /**    * 用户点击右上角分享    */   onShareAppMessage: function () {   } })

//fun.js const toast = str => {   return new Promise((resolve, reject) => {     wx.showToast({       title: str,       icon: "none",       duration: 2000,       success: () => {         setTimeout(() => {           resolve()         }, 2000)       }     })   }) } const successToast = str => {   return new Promise((resolve, reject) => {     wx.showToast({       title: str,       icon: "success",       duration: 2000,       success: () => {         setTimeout(() => {           resolve()         }, 2000)       }     })   }) }; const showloading = () => {   return new Promise((resolve, reject) => {     wx.showLoading({       title: "加载中",       success: () => {         resolve()       }     })   }) }; const hideloading = () => {   return new Promise((resolve, reject) => {     wx.hideLoading({       success: () => {         resolve()       }     }
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：vue实现签到日历效果_vue.js_
                                                                
下一篇：JavaScript中使用toLocaleString数字格式化处理详解_JavaScript_