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