300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 微信小程序----最最最最最简单的日历做法

微信小程序----最最最最最简单的日历做法

时间:2022-04-20 16:55:06

相关推荐

微信小程序----最最最最最简单的日历做法

微信小程序—-最最最最最简单的日历做法

写这篇文章的时候时间是/8/16,该日历写法但求界面简单,实现功能,如果需要更华丽的效果或者其他界面请自行更改,8月份日历效果图:

默认从1号开始排序,第一行的星期数随月份变化。

代码:

//jsvar today = new Date()var c = parseInt(today.getFullYear() / 100)var m = today.getMonth()+1var d = today.getDate()var y = today.getFullYear() - c*100var mm = mif(m==1||m==2){switch(m){case 1:m=13,y--;break;case 2:m=14,y--;break;}}while(d!=1){d--}var w = y + parseInt(y / 4) + parseInt(c / 4) - 2 * c + parseInt((26 * (m + 1) / 10)) + d - 1if(w<0){w=(w%7+7)%7;}else if(w>0){w=w%7}var mday;if (mm == 1 || mm == 3 || mm == 5 || mm == 7 || mm == 8 || mm == 10 || mm == 12 ){mday=31;}else if (mm == 4 || mm == 6 || mm == 9 || mm == 11){mday=30;}else if(mm==2){if (today.getFullYear() % 4 == 0 && today.getFullYear() % 100 != 0){mday=29;}else{mday=28;}}Page({data: {hang: [{}, {}, {}, {}, {}, {}],lie: [],week: ['日','一', '二', '三', '四', '五', '六' ]//0 1 2 3 4 5 6},onLoad: function (options) {var txt = thisvar num = 1;for (var i = 0; i < 6; i++) {for (var ii = 0; ii < 7; ii++) {if (num <= mday) {txt.setData({['lie[' + ii + '][' + i + ']']: num})}else if (num > mday) {txt.setData({['lie[' + ii + '][' + i + ']']: ''})}num++}}var jj = 0;for (var j = 0; j < 7; j++) {if (w < 7) {txt.setData({['lie[' + j + '][5]']: txt.data.week[w]})w++;}else if (w >= 7) {txt.setData({['lie[' + j + '][5]']: txt.data.week[jj]})jj++}}},})///8/16/19:50修改

//wxml<view class='rili'><block wx:for="{{hang}}" wx:for-item="hang" wx:for-index="hangid" wx:key="hangkey"><view class='hang'><block wx:for='{{lie}}' wx:for-item='lie' wx:for-index='lieid' wx:key='liekey'><text class='txt' wx:if="{{hangid==0}}">{{lie[hangid+5]}}</text><text class='txt' wx:if="{{hangid==1}}">{{lie[hangid-1]}}</text><text class='txt' wx:if="{{hangid==2}}">{{lie[hangid-1]}}</text><text class='txt' wx:if="{{hangid==3}}">{{lie[hangid-1]}}</text><text class='txt' wx:if="{{hangid==4}}">{{lie[hangid-1]}}</text><text class='txt' wx:if="{{hangid==5}}">{{lie[hangid-1]}}</text></block></view></block></view>

//wxss.rili{width: 100%;background-color: pink;}.hang{width: 100%;height: 100rpx;background-color: pink;display: flex;flex-direction: row;align-items: center;justify-content: space-around;flex: 1;}.txt{width: 70rpx;height: 70rpx;color: #ffffff;}

日历的实现主要运用蔡勒公式。

注:仅适用1582年(中国明朝万历十年)10月15日之后的时间。

欢迎转载,注明出处即可。喜欢的点赞

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。