From faeb0b98fc9671b2d51b3c5974377433d1bb5f5c Mon Sep 17 00:00:00 2001 From: imsyy Date: Fri, 10 Mar 2023 15:51:18 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=20=E6=97=B6=E5=85=89?= =?UTF-8?q?=E8=83=B6=E5=9B=8A=E6=98=BE=E7=A4=BA=E9=94=99=E8=AF=AF=20#101?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TimeCapsule/index.vue | 10 +- src/utils/getTime.js | 260 +++++++++++++++------------ 2 files changed, 146 insertions(+), 124 deletions(-) diff --git a/src/components/TimeCapsule/index.vue b/src/components/TimeCapsule/index.vue index 19eb3a9..850cf5b 100644 --- a/src/components/TimeCapsule/index.vue +++ b/src/components/TimeCapsule/index.vue @@ -9,7 +9,7 @@ 时光胶囊 今日已经度过了 {{ timeData.day.start }} 小时今日已经度过了 {{ timeData.day.elapsed }} 小时 本周已经度过了 {{ timeData.week.start }} 天本周已经度过了 {{ timeData.week.elapsed }} 天 本月已经度过了 {{ timeData.month.start }} 天本月已经度过了 {{ timeData.month.elapsed }} 天 今年已经度过了 {{ timeData.year.start }} 个月今年已经度过了 {{ timeData.year.elapsed }} 个月 { font-size: 0.95rem; } } - \ No newline at end of file + diff --git a/src/utils/getTime.js b/src/utils/getTime.js index c7b59b6..71460ab 100644 --- a/src/utils/getTime.js +++ b/src/utils/getTime.js @@ -1,134 +1,156 @@ -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 currentTime = { - year, - month, - day, - hour, - minute, - second, - weekday: weekday[time.getDay()], - } - return currentTime; -} + 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 currentTime = { + year, + month, + day, + hour, + 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; - // 周进度 - let weeks = [7, 1, 2, 3, 4, 5, 6]; - let weekDay = weeks[new Date().getDay()]; - let 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; - // 年进度 - let yearPass = (month / 12) * 100; - return { - day: { - start: parseInt(todayPassHours), - pass: parseInt(todayPassHoursPercent), - }, - week: { - start: weekDay, - pass: parseInt(weekDayPassPercent), - }, - month: { - start: date, - pass: parseInt(monthPassPercent), - }, - year: { - start: month == 0 ? month : month - 1, - pass: parseInt(yearPass), - } - } -} + // 日进度 + const todayStartDate = new Date(new Date().toLocaleDateString()).getTime(); + const todayPassHours = (new Date() - todayStartDate) / 1000 / 60 / 60; + const todayPassHoursPercent = (todayPassHours / 24) * 100; + + // 周进度 + const weeks = [7, 1, 2, 3, 4, 5, 6]; + const weekDay = weeks[new Date().getDay()]; + const weekDayPassPercent = (weekDay / 7) * 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; + + // 年进度 + 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: { + elapsed: Math.floor(todayPassHours), + pass: Math.floor(todayPassHoursPercent), + }, + week: { + elapsed: weekDay, + pass: Math.floor(weekDayPassPercent), + }, + month: { + elapsed: date, + pass: Math.floor(monthPassPercent), + }, + year: { + elapsed: month - 1, + pass: Math.floor(yearPassPercent), + }, + }; +}; // 欢迎提示 export const helloInit = () => { - let hour = new Date().getHours(); - let hello = null; - if (hour < 6) { - hello = "凌晨好"; - } else if (hour < 9) { - hello = "早上好"; - } else if (hour < 12) { - hello = "上午好"; - } else if (hour < 14) { - hello = "中午好"; - } else if (hour < 17) { - hello = "下午好"; - } else if (hour < 19) { - hello = "傍晚好"; - } else if (hour < 22) { - hello = "晚上好"; - } else { - hello = "夜深了"; - } - ElMessage({ - dangerouslyUseHTMLString: true, - message: `${hello} 欢迎来到我的主页`, - }); -} + const hour = new Date().getHours(); + let hello = null; + if (hour < 6) { + hello = "凌晨好"; + } else if (hour < 9) { + hello = "早上好"; + } else if (hour < 12) { + hello = "上午好"; + } else if (hour < 14) { + hello = "中午好"; + } else if (hour < 17) { + hello = "下午好"; + } else if (hour < 19) { + hello = "傍晚好"; + } else if (hour < 22) { + hello = "晚上好"; + } else { + hello = "夜深了"; + } + ElMessage({ + dangerouslyUseHTMLString: true, + message: `${hello} 欢迎来到我的主页`, + }); +}; // 默哀模式 +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}"; - ElMessage({ - message: "今天是中国国家纪念日", - duration: 14000, - icon: h(SpaCandle, { - theme: "filled", - fill: "#efefef", - }), - }); - } - } -} + 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: `今天是${anniversaries[key]}`, + duration: 14000, + icon: h(SpaCandle, { theme: "filled", fill: "#efefef" }), + }); + } +}; // 建站日期统计 export const siteDateStatistics = (startDate) => { - const currentDate = new Date(); - const differenceInTime = currentDate.getTime() - startDate.getTime(); - const differenceInDays = differenceInTime / (1000 * 3600 * 24); - const differenceInMonths = differenceInDays / 30; - const differenceInYears = differenceInMonths / 12; - if (differenceInYears >= 1) { - return `本站已经苟活了 ${Math.floor(differenceInYears)} 年 ${Math.floor(differenceInMonths % 12)} 月 ${Math.round(differenceInDays % 30)} 天`; - } else if (differenceInMonths >= 1) { - return `本站已经苟活了 ${Math.floor(differenceInMonths)} 月 ${Math.round(differenceInDays % 30)} 天`; - } else { - return `本站已经苟活了 ${Math.round(differenceInDays)} 天`; - } -} \ No newline at end of file + const currentDate = new Date(); + const differenceInTime = currentDate.getTime() - startDate.getTime(); + const differenceInDays = differenceInTime / (1000 * 3600 * 24); + const differenceInMonths = differenceInDays / 30; + const differenceInYears = differenceInMonths / 12; + if (differenceInYears >= 1) { + return `本站已经苟活了 ${Math.floor(differenceInYears)} 年 ${Math.floor( + differenceInMonths % 12 + )} 月 ${Math.round(differenceInDays % 30)} 天`; + } else if (differenceInMonths >= 1) { + return `本站已经苟活了 ${Math.floor(differenceInMonths)} 月 ${Math.round( + differenceInDays % 30 + )} 天`; + } else { + return `本站已经苟活了 ${Math.round(differenceInDays)} 天`; + } +};