一、实现原理
万年历
三个要素：
- 本月一号星期几，比如这个月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
