1. 程式人生 > >微信小程式----最最最最最簡單的日曆做法

微信小程式----最最最最最簡單的日曆做法

微信小程式—-最最最最最簡單的日曆做法
寫這篇文章的時候時間是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日之後的時間。
歡迎轉載,註明出處即可。喜歡的點贊