fix 一些小问题

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

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%;
 }

index.html

@@ -29,8 +29,8 @@
     <!-- 引入 Fontawesome -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css"
         media="all">
-    <!--引入 Vue-->
+    <!--引入 Vue
-    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>-->
     <!-- 引入 jQuery -->
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
     <!-- 百度统计 -->
@@ -226,14 +226,30 @@
                         <i class="fad fa-grip-lines-vertical"></i>
                     </div>
                     <div class="date" id="date">
-                        <p class="date-text" style="margin-top: 0rem;">今日已经度过了大约&nbsp;{{hour}}&nbsp;小时</p>
+                        <div class="item" id="dayProgress">
-                        <div v-html="jinduT()" class="marginbottom"></div>
+                            <div class="date-text" style="margin-top: 0rem;">今日已经度过了&nbsp;<span></span>&nbsp;小时</div>
-                        <p class="date-text">本周已经度过了&nbsp;{{week}}&nbsp;天，今天是第&nbsp;{{curweek}}&nbsp;天</p>
+                            <div class="progress">
-                        <div v-html="jinduZ()" class="marginbottom"></div>
+                                <div class="progress-bar"></div>
-                        <p class="date-text">本月已经度过了&nbsp;{{day}}&nbsp;天，今天是第&nbsp;{{curday}}&nbsp;天</p>
+                            </div>
-                        <div v-html="jinduD()" class="marginbottom"></div>
+                        </div>
-                        <p class="date-text">{{year}}&nbsp;年已经度过了&nbsp;{{month}}&nbsp;个月，度过了&nbsp;{{outday}}&nbsp;天</p>
+                        <div class="item" id="weekProgress">
-                        <div v-html="jinduY()" class="marginbottom"></div>
+                            <div class="date-text">本周已经度过了&nbsp;<span></span>&nbsp;天</div>
+                            <div class="progress">
+                                <div class="progress-bar"></div>
+                            </div>
+                        </div>
+                        <div class="item" id="monthProgress">
+                            <div class="date-text">本月已经度过了&nbsp;<span></span>&nbsp;天</div>
+                            <div class="progress">
+                                <div class="progress-bar"></div>
+                            </div>
+                        </div>
+                        <div class="item" id="yearProgress">
+                            <div class="date-text">今年已经度过了&nbsp;<span></span>&nbsp;个月</div>
+                            <div class="progress">
+                                <div class="progress-bar"></div>
+                            </div>
+                        </div>
                     </div>
                     <div class="line">
                         <i class="fad fa-grip-lines-vertical"></i>

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 () {

js/time.js

@@ -1,3 +1,4 @@
+/*
 var vm = new Vue({
     el: '#date',
     data: {
@@ -71,3 +72,54 @@ var vm = new Vue({
         }
     }
 })
+*/
+
+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()