From 29e36c340109e4759a173a03677f839338d5dd4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BA=95=E5=B1=82=E7=94=A8=E6=88=B7?= Date: Wed, 13 Oct 2021 18:16:29 +0800 Subject: [PATCH] =?UTF-8?q?fix=20=E4=B8=80=E4=BA=9B=E5=B0=8F=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 3 +++ css/style.css | 6 ++--- index.html | 36 +++++++++++++++++++++-------- js/main.js | 8 ++++++- js/time.js | 54 ++++++++++++++++++++++++++++++++++++++++++- 5 files changed, 91 insertions(+), 16 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/css/style.css b/css/style.css index 93ec6d6..8e0031d 100644 --- a/css/style.css +++ b/css/style.css @@ -114,7 +114,7 @@ span.img-text { border-radius: 6px; margin-top: 3.5rem; max-width: 460px; - cursor:pointer; + cursor: pointer; } .des { @@ -260,7 +260,7 @@ span.time-text { transform: scale(1.2); } -/*进度条*/ +/*时间胶囊*/ .progress { width: 100%; height: 20px; @@ -277,8 +277,6 @@ span.time-text { height: 20px; } -/*时间胶囊*/ - .date { width: 100%; } diff --git a/index.html b/index.html index f9a6b89..16bd9d3 100644 --- a/index.html +++ b/index.html @@ -29,8 +29,8 @@ - - + @@ -226,14 +226,30 @@
-

今日已经度过了大约 {{hour}} 小时

-
-

本周已经度过了 {{week}} 天，今天是第 {{curweek}} 天

-
-

本月已经度过了 {{day}} 天，今天是第 {{curday}} 天

-
-

{{year}} 年已经度过了 {{month}} 个月，度过了 {{outday}} 天

-
+
+
今日已经度过了  小时
+
+
+
+
+
+
本周已经度过了  天
+
+
+
+
+
+
本月已经度过了  天
+
+
+
+
+
+
今年已经度过了  个月
+
+
+
+
diff --git a/js/main.js b/js/main.js index 98d3268..d08d3cd 100644 --- a/js/main.js +++ b/js/main.js @@ -277,7 +277,13 @@ window.addEventListener('load', function () { } }) }) - +/* +document.getElementById("theme-toggle").addEventListener("click", () => { + document.body.className.includes("dark") ? (document.body.classList.remove('dark'), + localStorage.setItem("pref-theme", 'light')) : (document.body.classList.add('dark'), + localStorage.setItem("pref-theme", 'dark')) +}) +*/ //移动端切换功能区 var changemore = false; $('#changemore').on('click', function () { diff --git a/js/time.js b/js/time.js index a15661b..f821152 100644 --- a/js/time.js +++ b/js/time.js @@ -1,3 +1,4 @@ +/* var vm = new Vue({ el: '#date', data: { @@ -70,4 +71,55 @@ var vm = new Vue({ "%'>" + ye + " %" + "
"; } } -}) \ No newline at end of file +}) +*/ + +function init_life_time() { + function getAsideLifeTime() { + /* 当前时间戳 */ + let nowDate = +new Date(); + /* 今天开始时间戳 */ + let todayStartDate = new Date(new Date().toLocaleDateString()).getTime(); + /* 今天已经过去的时间 */ + let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60; + /* 今天已经过去的时间比 */ + let todayPassHoursPercent = (todayPassHours / 24) * 100; + $('#dayProgress .date-text span').html(parseInt(todayPassHours)); + $('#dayProgress .progress .progress-bar').css('width', parseInt(todayPassHoursPercent) + '%'); + $('#dayProgress .progress .progress-bar').html(parseInt(todayPassHoursPercent) + '%'); + /* 当前周几 */ + let weeks = { + 0: 7, + 1: 1, + 2: 2, + 3: 3, + 4: 4, + 5: 5, + 6: 6 + }; + let weekDay = weeks[new Date().getDay()]; + let weekDayPassPercent = (weekDay / 7) * 100; + $('#weekProgress .date-text span').html(weekDay); + $('#weekProgress .progress .progress-bar').css('width', parseInt(weekDayPassPercent) + '%'); + $('#weekProgress .progress .progress-bar').html(parseInt(weekDayPassPercent) + '%'); + /* 月 */ + 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; + $('#monthProgress .date-text span').html(date); + $('#monthProgress .progress .progress-bar').css('width', parseInt(monthPassPercent) + '%'); + $('#monthProgress .progress .progress-bar').html(parseInt(monthPassPercent) + '%'); + /* 年 */ + let yearPass = (month / 12) * 100; + $('#yearProgress .date-text span').html(month); + $('#yearProgress .progress .progress-bar').css('width', parseInt(yearPass) + '%'); + $('#yearProgress .progress .progress-bar').html(parseInt(yearPass) + '%'); + } + getAsideLifeTime(); + setInterval(() => { + getAsideLifeTime(); + }, 1000); +} +init_life_time() \ No newline at end of file