微信小程式----最最最最最簡單的日曆做法
阿新 • • 發佈:2019-01-30
微信小程式—-最最最最最簡單的日曆做法
寫這篇文章的時候時間是2018/8/16,該日曆寫法但求介面簡單,實現功能,如果需要更華麗的效果或者其他介面請自行更改,8月份日曆效果圖:
預設從1號開始排序,第一行的星期數隨月份變化。
程式碼:
//js
var today = new Date()
var c = parseInt(today.getFullYear() / 100)
var m = today.getMonth()+1
var d = today.getDate()
var y = today.getFullYear() - c*100
var mm = m
if(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 - 1
if(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 = this
var 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++
}
}
},
})
//2018/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日之後的時間。
歡迎轉載,註明出處即可。喜歡的點贊