caojiezi2003/Homepage-imsyy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修复 时光胶囊显示错误 #101

Browse Source
This commit is contained in:
imsyy 2023-03-10 15:51:18 +08:00
parent 7adf606935
commit faeb0b98fc
2 changed files with 146 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/TimeCapsule/index.vue
View File

@ -9,7 +9,7 @@
<span>时光胶囊</span>
</div>
<span class="text"
>今日已经度过了&nbsp;{{ timeData.day.start }}&nbsp;小时</span
>今日已经度过了&nbsp;{{ timeData.day.elapsed }}&nbsp;小时</span
>
<el-progress
:text-inside="true"
@ -17,7 +17,7 @@
:percentage="timeData.day.pass"
/>
<span class="text"
>本周已经度过了&nbsp;{{ timeData.week.start }}&nbsp;天</span
>本周已经度过了&nbsp;{{ timeData.week.elapsed }}&nbsp;天</span
>
<el-progress
:text-inside="true"
@ -25,7 +25,7 @@
:percentage="timeData.week.pass"
/>
<span class="text"
>本月已经度过了&nbsp;{{ timeData.month.start }}&nbsp;天</span
>本月已经度过了&nbsp;{{ timeData.month.elapsed }}&nbsp;天</span
>
<el-progress
:text-inside="true"
@ -33,7 +33,7 @@
:percentage="timeData.month.pass"
/>
<span class="text"
>今年已经度过了&nbsp;{{ timeData.year.start }}&nbsp;个月</span
>今年已经度过了&nbsp;{{ timeData.year.elapsed }}&nbsp;个月</span
>
<el-progress
:text-inside="true"

142
src/utils/getTime.js
View File

@ -1,20 +1,29 @@
import {
h
} from "vue";
import {
SpaCandle
} from "@icon-park/vue-next";
import { h } from "vue";
import { SpaCandle } from "@icon-park/vue-next";
// 时钟
export const getCurrentTime = () => {
let time = new Date();
let year = time.getFullYear();
let month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1;
let day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate();
let hour = time.getHours() < 10 ? '0' + time.getHours() : time.getHours();
let minute = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes();
let second = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds();
let weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
let month =
time.getMonth() + 1 < 10
? "0" + (time.getMonth() + 1)
: time.getMonth() + 1;
let day = time.getDate() < 10 ? "0" + time.getDate() : time.getDate();
let hour = time.getHours() < 10 ? "0" + time.getHours() : time.getHours();
let minute =
time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
let second =
time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
let weekday = [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
];
let currentTime = {
year,
month,
@ -23,51 +32,59 @@ export const getCurrentTime = () => {
minute,
second,
weekday: weekday[time.getDay()],
}
};
return currentTime;
}
};
// 时光胶囊
export const getTimeCapsule = () => {
// 日进度
let todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
let todayPassHours = (new Date() - todayStartDate) / 1000 / 60 / 60;
let todayPassHoursPercent = (todayPassHours / 24) * 100;
const todayStartDate = new Date(new Date().toLocaleDateString()).getTime();
const todayPassHours = (new Date() - todayStartDate) / 1000 / 60 / 60;
const todayPassHoursPercent = (todayPassHours / 24) * 100;
// 周进度
let weeks = [7, 1, 2, 3, 4, 5, 6];
let weekDay = weeks[new Date().getDay()];
let weekDayPassPercent = (weekDay / 7) * 100;
const weeks = [7, 1, 2, 3, 4, 5, 6];
const weekDay = weeks[new Date().getDay()];
const weekDayPassPercent = (weekDay / 7) * 100;
// 月进度
let year = new Date().getFullYear();
let date = new Date().getDate();
let month = new Date().getMonth() + 1;
let monthAll = new Date(year, month, 0).getDate();
let monthPassPercent = (date / monthAll) * 100;
const year = new Date().getFullYear();
const date = new Date().getDate();
const month = new Date().getMonth() + 1;
const monthAll = new Date(year, month, 0).getDate();
const monthPassPercent = (date / monthAll) * 100;
// 年进度
let yearPass = (month / 12) * 100;
const yearStartDate = new Date(year, 0, 1).getTime();
const yearEndDate = new Date(year + 1, 0, 1).getTime();
const yearPassHours = (new Date() - yearStartDate) / 1000 / 60 / 60;
const yearTotalHours = (yearEndDate - yearStartDate) / 1000 / 60 / 60;
const yearPassPercent = (yearPassHours / yearTotalHours) * 100;
return {
day: {
start: parseInt(todayPassHours),
pass: parseInt(todayPassHoursPercent),
elapsed: Math.floor(todayPassHours),
pass: Math.floor(todayPassHoursPercent),
},
week: {
start: weekDay,
pass: parseInt(weekDayPassPercent),
elapsed: weekDay,
pass: Math.floor(weekDayPassPercent),
},
month: {
start: date,
pass: parseInt(monthPassPercent),
elapsed: date,
pass: Math.floor(monthPassPercent),
},
year: {
start: month == 0 ? month : month - 1,
pass: parseInt(yearPass),
}
}
}
elapsed: month - 1,
pass: Math.floor(yearPassPercent),
},
};
};
// 欢迎提示
export const helloInit = () => {
let hour = new Date().getHours();
const hour = new Date().getHours();
let hello = null;
if (hour < 6) {
hello = "凌晨好";
@ -90,32 +107,33 @@ export const helloInit = () => {
dangerouslyUseHTMLString: true,
message: `<strong>${hello}</strong> 欢迎来到我的主页`,
});
}
};
// 默哀模式
const anniversaries = {
4.4: "清明节",
5.12: "汶川大地震纪念日",
7.7: "中国人民抗日战争纪念日",
9.18: "九·一八事变纪念日",
12.13: "南京大屠杀死难者国家公祭日",
};
export const checkDays = () => {
let myDate = new Date;
let mon = myDate.getMonth() + 1;
let date = myDate.getDate();
let days = ['4.4', '5.12', '7.7', '9.9', '9.18', '12.13'];
for (let day of days) {
let d = day.split('.');
if (mon == d[0] && date == d[1]) {
console.log("今天是纪念日");
let gray = document.createElement("style");
document.body.appendChild(gray);
gray.innerHTML = "html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none}";
const myDate = new Date();
const mon = myDate.getMonth() + 1;
const date = myDate.getDate();
const key = `${mon}.${date}`;
if (anniversaries.hasOwnProperty(key)) {
console.log(`今天是${anniversaries[key]}`);
const gray = document.createElement("style");
gray.innerHTML = "html{filter: grayscale(100%)}";
document.head.appendChild(gray);
ElMessage({
message: "今天是中国国家纪念日",
message: `今天是${anniversaries[key]}`,
duration: 14000,
icon: h(SpaCandle, {
theme: "filled",
fill: "#efefef",
}),
icon: h(SpaCandle, { theme: "filled", fill: "#efefef" }),
});
}
}
}
};
// 建站日期统计
export const siteDateStatistics = (startDate) => {
@ -125,10 +143,14 @@ export const siteDateStatistics = (startDate) => {
const differenceInMonths = differenceInDays / 30;
const differenceInYears = differenceInMonths / 12;
if (differenceInYears >= 1) {
return `本站已经苟活了 ${Math.floor(differenceInYears)} 年 ${Math.floor(differenceInMonths % 12)} 月 ${Math.round(differenceInDays % 30)} 天`;
return `本站已经苟活了 ${Math.floor(differenceInYears)} 年 ${Math.floor(
differenceInMonths % 12
)} 月 ${Math.round(differenceInDays % 30)} 天`;
} else if (differenceInMonths >= 1) {
return `本站已经苟活了 ${Math.floor(differenceInMonths)} 月 ${Math.round(differenceInDays % 30)} 天`;
return `本站已经苟活了 ${Math.floor(differenceInMonths)} 月 ${Math.round(
differenceInDays % 30
)} 天`;
} else {
return `本站已经苟活了 ${Math.round(differenceInDays)} 天`;
}
}
};