万年历的vue实现

一、实现原理

万年历

三个要素：

• 本月一号星期几，比如这个月1号星期五
• 上个月有多少天，上个月有30天

• 本月有多少天，这个月有31天

  
  分析图
  

  2044年4月1日到底星期几呢？

  
  控制台输出
  JS内置了一个对象叫做Date，可以计算日期。注意，月份从0开始。
  调用new Date()，格式 new Date(年, 月份 - 1, 日)
  

  可以打点调用getDay()，即可迅速获得那一天的星期几。

  
  image.png
  image.png
  有个好玩的东西
  2019年35月87日
  image.png
  JS的日期，能够自动进位，特别厉害。
  image.png

<template>
    <div>
        <table>
            <tr>
                <th>日</th>
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th>六</th>
            </tr>
            <tr v-for="i in 6" :key="i">
                <td v-for="j in 7" :key="j">
                    {{jisuan[
                        (i-1) * 7 +  (j-1)
                    ]}}
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                year: 2019,
                month: 8
            }
        },
        computed: {
            jisuan() {
                var benyueyihaoxingqiji = new Date(this.year, this.month - 1, 1).getDay();
                var shanggeyuejitian = new Date(this.year, this.month, 0).getDate();
                var benyueyoujitian = new Date(this.year, this.month, 0).getDate();
                
                var arr = [];
                for(let i = 0; i < benyueyihaoxingqiji; i++){
                    arr.unshift(shanggeyuejitian - i);
                }
                for(let i = 1; i <= benyueyoujitian; i++){
                    arr.push(i);
                }
                var n = 1;
                while(arr.length<42){
                    arr.push(n++);
                }
                return arr;
            }
        }
    }
</script>

<style>
    table{
        border-collapse: collapse;
    }
    td,th{
        border: 1px solid #000;
        padding: 10px 20px;
    }
</style>

image.png

高级版

<template>
    <div>
        <select name="" id="" v-model="year">
            <option :value="1900+i" v-for="i in 200" :key="i">{{1900+i}}</option>
        </select>
        <select name="" id="" v-model="month">
            <option :value="i" v-for="i in 12" :key="i">{{i}}</option>
        </select>
        <table>
            <tr>
                <th>日</th>
                <th>一</th>
                <th>二</th>
                <th>三</th>
                <th>四</th>
                <th>五</th>
                <th>六</th>
            </tr>
            <tr v-for="i in 6" :key="i">
                <td v-for="j in 7" :key="j">
                    <p>{{jisuan[(i-1)*7+(j-1)].gongli}}</p>
                    <p>{{
                            jisuan[(i-1)*7+(j-1)].nongli.term
                            ?
                            jisuan[(i-1)*7+(j-1)].nongli.term
                            :
                            jisuan[(i-1)*7+(j-1)].nongli.dayCn
                        }}</p>

                </td>
            </tr>
        </table>
    </div>
</template>

<script>
    import solarlunar from 'solarLunar';
    export default {
        data() {
            return {
                year: 2019,
                month: 8
            }
        },
        computed: {
            jisuan() {
                // console.log(solarlunar.solar2lunar(2019, 8, 28))
                var benyueyihaoxingqiji = new Date(this.year, this.month - 1, 1).getDay();
                var shanggeyueyoujitian = new Date(this.year, this.month - 1, 0).getDate();
                var benyueyoujitian = new Date(this.year, this.month, 0).getDate();
                var arr = [];
                for(let i = 0; i < benyueyihaoxingqiji; i++){
                    arr.unshift({
                        'gongli': shanggeyueyoujitian - i,
                        'nongli': solarlunar.solar2lunar(this.year, this.month - 1, shanggeyueyoujitian - i)
                    });
                }
                for(let i = 1; i <= benyueyoujitian; i++){
                    arr.push({
                        'gongli': i,
                        'nongli': solarlunar.solar2lunar(this.year, this.month, i)
                    });
                }
                var n = 1;
                while(arr.length<42){
                    arr.push({
                        'gongli': n,
                        'nongli': solarlunar.solar2lunar(this.year, this.month + 1, n)
                    });
                    n++;
                }
                return arr;
            }
        }
    }
</script>

image.png