大量代码来至这里

<template>
<view class="calendar-main">
<!-- 当前年月 -->
<view class="choose_year">
<view class="icon" @click="chooseYears(-1)"><<</view>
<view class="icon" @click="chooseMonth(-1)"><</view>
<view class="date">{{ year }}年{{ month.toString().padStart(2, '0') }}月</view>
<view class="icon" @click="chooseMonth(1)">></view>
<view class="icon" @click="chooseYears(1)">>></view>
</view>
<!-- 农历 -->
<view class="lunar-detail-date">
{{ lunarDetail.lunarYear.substring(0, 2) }} -【{{ lunarDetail.lunarYear.substring(2, 3) }}】年{{ lunarDetail.lunarMonth }}月{{ lunarDetail.lunarDay }}
</view> <!-- 日历 -->
<view class="days_area">
<view class="day week" v-for="week in weeks" :key="week">{{ week }}</view>
<view class="day" @click="chooseThisDay(day.gregorian)" v-for="(day, index) in days" :key="index" :class="day.gregorian === today ? 'choose_day' : ''">
<text>{{ day.gregorian }}</text>
<text>{{ day.lunar }}</text>
<text>{{ day.dayGanzhi }}</text>
</view>
</view>
</view>
</template> <script>
import { sloarToLunar, getYearMonthDay, getDayGanzhi } from '@/computedLunarDate.js'; class Day {
// 公历
gregorian = ''; // 农历
lunar = ''; dayGanzhi = ''; constructor(gregorian, lunar, dayGanzhi) {
this.gregorian = gregorian;
this.lunar = lunar;
this.dayGanzhi = dayGanzhi;
}
} export default {
name: 'LunarCalendar',
props: ['currentDate'],
data() {
return {
year: 0,
month: 0,
today: 0,
days: [],
weeks: ['一', '二', '三', '四', '五', '六', '日'],
todayDate: 0
};
},
mounted() {
this.todayDate = new Date().getDate();
if (this.currentDate) {
const now = new Date(this.currentDate);
this.year = now.getFullYear();
this.month = now.getMonth() + 1;
this.today = now.getDate();
} else {
const now = new Date();
this.year = now.getFullYear();
this.month = now.getMonth() + 1;
this.today = now.getDate();
}
this.getDays();
},
computed: {
selectDate() {
return `${this.year}-${this.month.toString().padStart(2, '0')}-${this.today}`;
},
lunarDetail() {
return sloarToLunar(this.year, this.month.toString().padStart(2, '0'), this.today);
}
},
methods: {
// 获取当前月份所有公历日期及其农历日期
getDays() {
this.days = [];
const time = new Date();
time.setFullYear(this.year, this.month, 0); const firstDay = new Date(this.year, this.month - 1, 1); // 当月第一天
const lastDay = new Date(this.year, this.month, 0); // 当月最后天 // 获取星期中的第几天(0-6)(星期日-星期六)
const weekIndex = firstDay.getDay() == 0 ? 7 : firstDay.getDay();
for (let i = 1; i < weekIndex; i++) {
this.days.push(new Day('', '', ''));
}
for (let i = 1; i <= time.getDate(); i++) {
this.days.push(new Day(i, getYearMonthDay(this.year, this.month, i), getDayGanzhi(this.year, this.month, i)));
}
},
// 改变年份
chooseYears(state) {
this.year += state;
if (new Date().getFullYear() === this.year && new Date().getMonth() + 1 === this.month) {
this.today = this.todayDate;
} else {
this.today = 0;
}
this.getDays();
},
// 改变月份
chooseMonth(state) {
this.month += state;
if (new Date().getFullYear() === this.year && new Date().getMonth() + 1 === this.month) {
this.today = this.todayDate;
} else {
this.today = 0;
}
if (this.month < 1) {
this.month = 12;
this.chooseYears(-1);
} else if (this.month > 12) {
this.month = 1;
this.chooseYears(1);
} else {
this.getDays();
}
},
chooseThisDay(day) {
console.log(this.lunarDetail);
if (day > 0) {
this.today = day;
}
},
getBit(m, n) {
return 29 + ((m >> n) & 1);
}
}
};
</script> <style lang="less" scoped>
.calendar-main {
width: 100vw;
background-color: #fff;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
border-radius: 5px;
.choose_year {
display: flex;
.icon {
padding: 0 8rpx;
}
.date {
flex: 1;
text-align: center;
}
}
.lunar-detail-date {
line-height: 15px;
text-align: center;
color: #ff6800;
}
.days_area {
display: flex;
flex-wrap: wrap;
.day {
width: 14.28%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 20rpx;
padding: 8rpx 0;
&:hover {
background-color: #87bdf3;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
}
.week {
background-color: #fff;
color: #19233c;
font-weight: bold;
height: 40px;
line-height: 40px;
margin: 0;
}
.choose_day {
background-color: dodgerblue;
color: #fff;
font-weight: bold;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text {
color: #fff;
}
}
}
.bottom-btn {
text-align: right;
span {
padding: 4px 8px;
margin-right: 5px;
cursor: pointer;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
&:hover {
color: dodgerblue;
border: 1px solid dodgerblue;
}
}
}
}
</style>

computedLunarDate.js

// 天干地支怎么算 https://www.nongli.com/item5/bz/17105.html
// 计算日干支 http://www.yangyide.net/suanmingwhy/3757.html
let lunarYearArr = [
0x0b557, //1949
0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5b0, 0x14573, 0x052b0, 0x0a9a8, 0x0e950, 0x06aa0, //1950-1959
0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0, //1960-1969
0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6, //1970-1979
0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570, //1980-1989
0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0, //1990-1999
0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5, //2000-2009
0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930, //2010-2019
0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530, //2020-2029
0x05aa0, 0x076a3, 0x096d0, 0x04afb, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45, //2030-2039
0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, //2040-2049
0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0, //2050-2059
0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, //2060-2069
0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, //2070-2079
0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, //2080-2089
0x0e968, 0x0d520, 0x0daa0, 0x16aa6, 0x056d0, 0x04ae0, 0x0a9d4, 0x0a2d0, 0x0d150, 0x0f252, //2090-2099
0x0d520 //2100
];
let lunarMonth = ['正', '二', '三', '四', '五', '六', '七', '八', '九', '十', '冬', '腊']
let lunarDay = ['一', '二', '三', '四', '五', '六',
'七', '八', '九', '十', '初', '廿'
] let tianGan = ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'];
let diZhiKey = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
let diZhi = ['子鼠', '丑牛', '寅虎', '卯兔', '辰龙', '巳蛇', '午马',
'未羊', '申猴', '酉鸡', '戌狗', '亥猪'
];
const EvenMonth = '2,4,6,8,10,12'.split(',')
// 公历转农历函数
export const sloarToLunar = function(sy, sm, sd) {
// 输入的月份减1处理
sm -= 1; // 计算与公历基准的相差天数
// Date.UTC()返回的是距离公历1970年1月1日的毫秒数,传入的月份需要减1
let daySpan = (Date.UTC(sy, sm, sd) - Date.UTC(1949, 0, 29)) / (24 * 60 * 60 * 1000) + 1;
let ly, lm, ld, lz;
// 确定输出的农历年份
for (let j = 0; j < lunarYearArr.length; j++) {
daySpan -= lunarYearDays(lunarYearArr[j]);
if (daySpan <= 0) {
ly = 1949 + j;
// 获取农历年份确定后的剩余天数
daySpan += lunarYearDays(lunarYearArr[j]);
break
}
} // 确定输出的农历月份
for (let k = 0; k < lunarYearMonths(lunarYearArr[ly - 1949]).length; k++) {
daySpan -= lunarYearMonths(lunarYearArr[ly - 1949])[k];
if (daySpan <= 0) {
// 有闰月时,月份的数组长度会变成13,因此,当闰月月份小于等于k时,lm不需要加1
if (hasLeapMonth(lunarYearArr[ly - 1949]) && hasLeapMonth(lunarYearArr[ly - 1949]) <= k) {
if (hasLeapMonth(lunarYearArr[ly - 1949]) < k) {
lm = k;
} else if (hasLeapMonth(lunarYearArr[ly - 1949]) === k) {
lm = '闰' + k;
} else {
lm = k + 1;
}
} else {
lm = k + 1;
}
// 获取农历月份确定后的剩余天数
daySpan += lunarYearMonths(lunarYearArr[ly - 1949])[k];
break
}
} // 确定输出农历哪一天
ld = daySpan; // 将计算出来的农历月份转换成汉字月份,闰月需要在前面加上闰字
if (hasLeapMonth(lunarYearArr[ly - 1949]) && (typeof(lm) === 'string' && lm.indexOf('闰') > -1)) {
lm = `闰${lunarMonth[/\d/.exec(lm) - 1]}`
} else {
lm = lunarMonth[lm - 1];
} // 将计算出来的农历年份转换为天干地支年
ly = getTianGan(ly) + getDiZhi(ly);
// 将计算出来的农历天数转换成汉字
if (ld < 11) {
ld = `${lunarDay[10]}${lunarDay[ld-1]}`
} else if (ld > 10 && ld < 20) {
ld = `${lunarDay[9]}${lunarDay[ld-11]}`
} else if (ld === 20) {
ld = `${lunarDay[1]}${lunarDay[9]}`
} else if (ld > 20 && ld < 30) {
ld = `${lunarDay[11]}${lunarDay[ld-21]}`
} else if (ld === 30) {
ld = `${lunarDay[2]}${lunarDay[9]}`
}
return {
lunarYear: ly,
lunarMonth: lm,
lunarDay: ld,
lunarShengXiao: lz
}
}; // 公历day to 农历day
export const getYearMonthDay = function(sy, sm, sd) {
// 输入的月份减1处理
sm -= 1; // 计算与公历基准的相差天数
// Date.UTC()返回的是距离公历1970年1月1日的毫秒数,传入的月份需要减1
let daySpan = (Date.UTC(sy, sm, sd) - Date.UTC(1949, 0, 29)) / (24 * 60 * 60 * 1000) + 1;
let ly, lm, ld, lz;
// 确定输出的农历年份
for (let j = 0; j < lunarYearArr.length; j++) {
daySpan -= lunarYearDays(lunarYearArr[j]);
if (daySpan <= 0) {
ly = 1949 + j;
// 获取农历年份确定后的剩余天数
daySpan += lunarYearDays(lunarYearArr[j]);
break
}
} // 确定输出的农历月份
for (let k = 0; k < lunarYearMonths(lunarYearArr[ly - 1949]).length; k++) {
daySpan -= lunarYearMonths(lunarYearArr[ly - 1949])[k];
if (daySpan <= 0) {
// 有闰月时,月份的数组长度会变成13,因此,当闰月月份小于等于k时,lm不需要加1
if (hasLeapMonth(lunarYearArr[ly - 1949]) && hasLeapMonth(lunarYearArr[ly - 1949]) <= k) {
if (hasLeapMonth(lunarYearArr[ly - 1949]) < k) {
lm = k;
} else if (hasLeapMonth(lunarYearArr[ly - 1949]) === k) {
lm = '闰' + k;
} else {
lm = k + 1;
}
} else {
lm = k + 1;
}
// 获取农历月份确定后的剩余天数
daySpan += lunarYearMonths(lunarYearArr[ly - 1949])[k];
break
}
} // 确定输出农历哪一天
ld = daySpan; // 将计算出来的农历月份转换成汉字月份,闰月需要在前面加上闰字
if (hasLeapMonth(lunarYearArr[ly - 1949]) && (typeof(lm) === 'string' && lm.indexOf('闰') > -1)) {
lm = `闰${lunarMonth[/\d/.exec(lm) - 1]}`
} else {
lm = lunarMonth[lm - 1];
} // 将计算出来的农历年份转换为天干地支年
ly = getTianGan(ly) + getDiZhi(ly);
// 将计算出来的农历天数转换成汉字
if (ld < 11) {
ld = `${lunarDay[10]}${lunarDay[ld-1]}`
} else if (ld > 10 && ld < 20) {
ld = `${lunarDay[9]}${lunarDay[ld-11]}`
} else if (ld === 20) {
ld = `${lunarDay[1]}${lunarDay[9]}`
} else if (ld > 20 && ld < 30) {
ld = `${lunarDay[11]}${lunarDay[ld-21]}`
} else if (ld === 30) {
ld = `${lunarDay[2]}${lunarDay[9]}`
}
return ld;
}; // 获取某年某月某日(公历)的日干支
// http://www.yangyide.net/suanmingwhy/3757.html
// https://wannianrili.51240.com/
export const getDayGanzhi = function(y, m, d) {
y = y.toString().padStart(4, '0') const isEvenMonth = EvenMonth.includes(m.toString());
const C = parseInt(y.substr(0, 2)); y = parseInt(y.substr(2)) // 年份后两位 if (m == 1 || m == 2) {
y -= 1;
}
if (m == 1) m = 13
if (m == 2) m = 14 //C 是世纪数减一,y 是年份后两位(若为1月、2月则当前年份减一),M 是月份(若为1月、2月则分别按13、14来计算),d 是日数。奇数月i=0,偶数月i=6。 // G = 4C + [C / 4] + 5y + [y / 4] + [3 * (M + 1) / 5] + d - 3 let G = 4 * C + parseInt(C / 4) + 5 * y + parseInt(y / 4) + parseInt(3 * (m + 1) / 5) + d - 3;
G = G % 10;
if (G === 0) {
G = tianGan.length
}
G = tianGan[G - 1] // Z = 8C + [C / 4] + 5y + [y / 4] + [3 * (M + 1) / 5] + d + 7 + i
const i = isEvenMonth ? 6 : 0;
let Z = 8 * C + parseInt(C / 4) + 5 * y + parseInt(y / 4) + parseInt(3 * (m + 1) / 5) + d + 7 + i;
Z = Z % 12;
if (Z === 0) Z = diZhiKey.length
Z = diZhiKey[Z - 1];
return G + Z
} // 计算农历年是否有闰月,参数为存储农历年的16进制
// 农历年份信息用16进制存储,其中16进制的最后1位可以用于判断是否有闰月
function hasLeapMonth(ly) {
// 获取16进制的最后1位,需要用到&与运算符
if (ly & 0xf) {
return ly & 0xf
} else {
return false
}
} // 如果有闰月,计算农历闰月天数,参数为存储农历年的16进制
// 农历年份信息用16进制存储,其中16进制的第1位(0x除外)可以用于表示闰月是大月还是小月
function leapMonthDays(ly) {
if (hasLeapMonth(ly)) {
// 获取16进制的第1位(0x除外)
return (ly & 0xf0000) ? 30 : 29
} else {
return 0
}
} // 计算农历一年的总天数,参数为存储农历年的16进制
// 农历年份信息用16进制存储,其中16进制的第2-4位(0x除外)可以用于表示正常月是大月还是小月
function lunarYearDays(ly) {
let totalDays = 0; // 获取正常月的天数,并累加
// 获取16进制的第2-4位,需要用到>>移位运算符
for (let i = 0x8000; i > 0x8; i >>= 1) {
let monthDays = (ly & i) ? 30 : 29;
totalDays += monthDays;
}
// 如果有闰月,需要把闰月的天数加上
if (hasLeapMonth(ly)) {
totalDays += leapMonthDays(ly);
} return totalDays
} // 获取农历每个月的天数
// 参数需传入16进制数值
function lunarYearMonths(ly) {
let monthArr = []; // 获取正常月的天数,并添加到monthArr数组中
// 获取16进制的第2-4位,需要用到>>移位运算符
for (let i = 0x8000; i > 0x8; i >>= 1) {
monthArr.push((ly & i) ? 30 : 29);
}
// 如果有闰月,需要把闰月的天数加上
if (hasLeapMonth(ly)) {
monthArr.splice(hasLeapMonth(ly), 0, leapMonthDays(ly));
} return monthArr;
} // 将农历年转换为天干,参数为农历年
function getTianGan(ly) {
let tianGanKey = (ly - 3) % 10;
if (tianGanKey === 0) tianGanKey = 10;
return tianGan[tianGanKey - 1];
} // 将农历年转换为地支,参数为农历年
function getDiZhi(ly) {
let diZhiKey = (ly - 3) % 12;
if (diZhiKey === 0) diZhiKey = 12;
return diZhi[diZhiKey - 1];
}

uniapp 万年历的更多相关文章

  1. php万年历

    最近学习php循环.日期显示.GET方式请求,进而实现了一个小程序. 直接上代码: <?php header("Content-type:text/html; charset=UTF- ...

  2. c#实现万年历示例分享 万年历农历查询

    cs.cs(类页面) using System;using System.Collections.Generic;using System.Linq;using System.Web; namespa ...

  3. 小JAVA大世界之万年历

    import java.util.Scanner; public class Calendar { public static void main(String[] args) { // 万年历 in ...

  4. PHP世纪万年历

    <?  //世纪万年历  #这是唯一的设置-请输入php文件的位置  $file="http://192.168.1.168/php/rl/s2m.php";  //#农历每 ...

  5. C#实现万年历(农历、节气、节日、星座、属相、生肖、闰年等)

    C# 万年历 农历 节气 节日 星座 星宿 属相 生肖 闰年月 时辰等,代码如下: using System.Collections.Generic; using System.Text; using ...

  6. STM32的RTC万年历显示问题

    博客整理后写出来的,有点乱,大家见谅! 想让串口输出万年历效果.每次秒刷新一次 结果是串口软件一直输出,看起来很难受 先讲一讲C代码的\r和\n的区别 \r 就是return 回到 本行 行首 这就会 ...

  7. java 面向过程实现万年历

    public class Test { /** * @param args */ public static void main(String[] args) { // TODO Auto-gener ...

  8. [C语言练习]万年历加强版

    /** * @copyright 2011 Chunhui Wang * * wangchunhui@wangchunhui.cn */ #include<stdio.h> int mai ...

  9. IT第六天 - eclipse快捷操作、万年历项目的编写、菱形的打印输出、代码简化

    IT第六天 上午 小项目 1.程序提前结束的退出标志 2.登录用户的模拟,给出适当的提示信息 3.根据要求,寻找规律,然后编写程序 Eclipse的使用 1.快捷键的使用 下午 中小项目 1.九九乘法 ...

随机推荐

  1. SpringCloud及其组件详解

    SpringCloud及其组件详解 1.Spring Cloud 1.1 Spring Cloud和Dubbo的区别图解 1.2 微服务的技术栈 2.Spring Cloud 概述 2.1 Sprin ...

  2. Java——break,continue,return语句

    break语句: break:用于改变程序控制流 用于do-while.while.for中时,可跳出循环而执行循环后面的语句. break的作用:终止当前循环语句的执行. break还可以用来终止s ...

  3. Microsoft Exchange远程代码执行漏洞(CVE-2020-16875)

    Microsoft Exchange远程代码执行漏洞(CVE-2020-16875) 漏洞信息: 由于对cmdlet参数的验证不正确,Microsoft Exchange服务器中存在一个远程执行代码漏 ...

  4. telnet | ping

    ping通常是用来检查网络是否通畅或者网络连接速度的命令.  ping www.baidu.com 而telnet是用来探测指定ip是否开放指定端口的. telnet xxx 443 查看443开放没 ...

  5. linux环境变量 shell变量 command not found解决方法(转)

    在Ubuntu.centos中有如下几个文件可以设置环境变量1./etc/profile:在登录时,操作系统定制用户环境时使用的第一个文件,此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文 ...

  6. 远程url文件地址转成byte

    public static byte[] urlTobyte(String url) throws MalformedURLException { URL ur = new URL(url); Buf ...

  7. 图的深度优先遍历算法(DFS)

    搜索算法有很多种,本次文章主要分享图(无向图)的深度优先算法.深度优先算法(DFS)主要是应用于搜索中,早期是在爬虫中使用.其主要的思想有如下: 1.先访问一个节点v,然后标记为已被访问过2.找到第一 ...

  8. 20000套免费ppt模板获取攻略

    前言 又到年末了,发现需要用到简历,PPT这些的地方又多了.PPT这东西吧,颜值真的很重要,毕竟老板拉融资都是用ppt拉来的.只要ppt够精美,外加上你的故事讲得好,A轮指定不是问题呀.往小处说,就是 ...

  9. C++的智能指针你了解吗?

  10. 配置VS2013 + opencv 2.4.10

    其实我内心是极力反对装这么老的版本的,但是要交课堂作业~~好无奈 [注] : 如果按照本文配置不成功,可以试一下其他博客里面的配置(多试一试总能成功的) https://jingyan.baidu.c ...