新增 更多页面

css/mobile.css

@@ -206,7 +206,7 @@
 .time,
 .link-card,
 .message {
-    animation: fade-in 0.5;
+    animation: fade-in;
     -webkit-animation: fade-in 0.5s;
     -moz-animation: fade-in 0.5s;
     -o-animation: fade-in 0.5s;

css/style.css

@@ -223,12 +223,12 @@ span.time-text {
     backdrop-filter: blur(10px);
     top: 7%;
     border-radius: 6px;
-    padding: 20px;
+    padding: 30px;
 }
 
 .mores .more {
     display: flex;
-    justify-content: center;
+    justify-content: space-evenly;
     flex-direction: column;
     align-items: center;
     animation: fade;
@@ -238,14 +238,50 @@ span.time-text {
     -ms-animation: fade 0.3s;
 }
 
-i.fad.fa-comment-alt-dots {
-    font-size: 2.75rem;
-}
-
 .mores .col.right {
     display: none;
 }
 
+.close {
+    left: auto;
+    top: 4px;
+    right: 8px;
+    font-size: 1.45rem;
+}
+
+/*进度条*/
+.progress {
+    width: 100%;
+    height: 20px;
+    align-items: center;
+    background: rgb(255 255 255 / 25%) !important;
+    backdrop-filter: blur(5px);
+}
+
+.progress-bar {
+    font-family: 'UnidreamLED';
+    background-color: #efefef !important;
+    color: rgb(86 77 89) !important;
+    font-size: 0.95rem;
+    height: 20px;
+}
+
+/*时间胶囊*/
+
+.date {
+    width: 100%;
+}
+
+.date-text {
+    margin: 1rem 0rem 0.5rem 0rem;
+}
+
+/*更多页面链接*/
+
+.mores .link-card {
+    height: 48px !important;
+}
+
 /*页脚样式*/
 footer {
     text-align: center;

index.html

@@ -29,10 +29,8 @@
     <!-- 引入 Fontawesome -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css"
         media="all">
-    <!--引入Aplayer-->
+    <!--引入 Vue-->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
-    <!--<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>-->
     <!-- 引入 jQuery -->
     <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
     <!-- 百度统计 -->
@@ -218,8 +216,74 @@
                 </div>
                 <!--更多内容-->
                 <div class="more cards">
-                    <i class="fad fa-comment-alt-dots"></i>
+                    <div class="close fixed-top" onclick="switchMore()"><i class="fad fa-times-circle"></i></div>
-                    <p class="text" style="margin-top: 1.5rem;">还没想好要写些啥</p>
+                    <div class="line" style="margin-top: 1rem;">
+                        <i class="fad fa-grip-lines-vertical"></i>
+                        <span class="line-text">时间胶囊</span>
+                        <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 v-html="jinduT()" class="marginbottom"></div>
+                        <p class="date-text">本周已经度过了&nbsp;{{week}}&nbsp;天，今天是第&nbsp;{{curweek}}&nbsp;天</p>
+                        <div v-html="jinduZ()" class="marginbottom"></div>
+                        <p class="date-text">本月已经度过了&nbsp;{{day}}&nbsp;天，今天是第&nbsp;{{curday}}&nbsp;天</p>
+                        <div v-html="jinduD()" class="marginbottom"></div>
+                        <p class="date-text">{{year}}&nbsp;年已经度过了&nbsp;{{month}}&nbsp;个月，度过了&nbsp;{{outday}}&nbsp;天</p>
+                        <div v-html="jinduY()" class="marginbottom"></div>
+                    </div>
+                    <div class="line">
+                        <i class="fad fa-grip-lines-vertical"></i>
+                        <span class="line-text">杂七杂八</span>
+                        <i class="fad fa-grip-lines-vertical"></i>
+                    </div>
+                    <!--网站链接-->
+                    <div class="row">
+                        <div class="col">
+                            <a href="https://status.imsyy.top/" target="_blank">
+                                <div class="link-card cards">
+                                    <span class="link-name">站点监测</span>
+                                </div>
+                            </a>
+                        </div>
+                        <div class="col 2">
+                            <a href="https://player.imsyy.top/" target="_blank">
+                                <div class="link-card cards">
+                                    <span class="link-name">播放器</span>
+                                </div>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a href="https://write.imsyy.top/" target="_blank">
+                                <div class="link-card cards">
+                                    <span class="link-name">Markdown</span>
+                                </div>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="row" style="margin-top: 1.5rem;">
+                        <div class="col">
+                            <a href="https://img.imsyy.top/" target="_blank">
+                                <div class="link-card cards">
+                                    <span class="link-name">图片站</span>
+                                </div>
+                            </a>
+                        </div>
+                        <div class="col 2">
+                            <a href="https://file.imsyy.top/" target="_blank">
+                                <div class="link-card cards">
+                                    <span class="link-name">文件站</span>
+                                </div>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a>
+                                <div class="link-card cards">
+                                    <span class="link-name">还没搞</span>
+                                </div>
+                            </a>
+                        </div>
+                    </div>
                 </div>
             </div>
         </main>
@@ -233,6 +297,7 @@
     </section>
     <!-- JS -->
     <script type="text/javascript" src="./js/main.js"></script>
+    <script type="text/javascript" src="./js/time.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
 </body>
 

js/main.js

@@ -205,7 +205,7 @@ window.addEventListener('load', function () {
             document.getElementById("container").classList.remove('menus');
         }
         //移动端隐藏更多页面
-        if (window.innerWidth <= 660) {
+        if (window.innerWidth <= 990) {
             document.getElementById("container").classList.remove('mores');
             document.getElementById("change").innerHTML = "Hello&nbsp;World&nbsp;!";
             document.getElementById("change1").innerHTML = "一个建立于 21 世纪的小站，存活于互联网的边缘";

js/music.js

@@ -1,283 +0,0 @@
-function aplayer() {
-    const ap = new APlayer({
-        container: document.getElementById('aplayer'),
-        order: 'random',
-        preload: 'auto',
-        volume: 0.5,
-        mutex: true,
-        listFolded: true,        lrcType: 3,
-        audio: [{
-                name: 'Mojito',
-                artist: '周杰伦',
-                url: 'https://file.imsyy.top/music/songs/%E5%91%A8%E6%9D%B0%E4%BC%A6-Mojito.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M0000009C3rp3Kfwg0_3.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E5%91%A8%E6%9D%B0%E4%BC%A6-Mojito.lrc',
-                theme: '#3fbce8'
-            },
-            {
-                name: '夜曲',
-                artist: '周杰伦',
-                url: 'https://file.imsyy.top/music/songs/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E5%A4%9C%E6%9B%B2.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M0000024bjiL2aocxT_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E5%A4%9C%E6%9B%B2.lrc',
-                theme: '#171513'
-            },
-            {
-                name: '发如雪',
-                artist: '周杰伦',
-                url: 'https://file.imsyy.top/music/songs/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E5%8F%91%E5%A6%82%E9%9B%AA.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M0000024bjiL2aocxT_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E5%8F%91%E5%A6%82%E9%9B%AA.lrc',
-                theme: '#171513'
-            },
-            {
-                name: '稻香',
-                artist: '周杰伦',
-                url: 'https://file.imsyy.top/music/songs/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%A8%BB%E9%A6%99.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%A8%BB%E9%A6%99.lrc',
-                theme: '#e3ae55'
-            },
-            {
-                name: '七里香',
-                artist: '周杰伦',
-                url: 'https://file.imsyy.top/music/songs/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E4%B8%83%E9%87%8C%E9%A6%99.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003DFRzD192KKD_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E4%B8%83%E9%87%8C%E9%A6%99.lrc',
-                theme: '#395732'
-            },
-            {
-                name: '晴天',
-                artist: '周杰伦',
-                url: 'https://file.imsyy.top/music/songs/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E6%99%B4%E5%A4%A9.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000000MkMni19ClKG_3.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E6%99%B4%E5%A4%A9.lrc',
-                theme: '#08362e'
-            },
-            {
-                name: '以父之名',
-                artist: '周杰伦',
-                url: 'https://file.imsyy.top/music/songs/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E4%BB%A5%E7%88%B6%E4%B9%8B%E5%90%8D.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000000MkMni19ClKG_3.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E4%BB%A5%E7%88%B6%E4%B9%8B%E5%90%8D.lrc',
-                theme: '#08362e'
-            },
-            {
-                name: '本草纲目',
-                artist: '周杰伦',
-                url: 'https://file.imsyy.top/music/songs/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E6%9C%AC%E8%8D%89%E7%BA%B2%E7%9B%AE.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000002jLGWe16Tf1H_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E6%9C%AC%E8%8D%89%E7%BA%B2%E7%9B%AE.lrc',
-                theme: '#171513'
-            },
-            {
-                name: '简单爱',
-                artist: '周杰伦',
-                url: 'https://file.imsyy.top/music/songs/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%AE%80%E5%8D%95%E7%88%B1.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000000I5jJB3blWeN_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%AE%80%E5%8D%95%E7%88%B1.lrc',
-                theme: '#c21c0f'
-            },
-            {
-                name: '青花瓷',
-                artist: '周杰伦',
-                url: 'https://file.imsyy.top/music/songs/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E9%9D%92%E8%8A%B1%E7%93%B7.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000002eFUFm2XYZ7z_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E9%9D%92%E8%8A%B1%E7%93%B7.lrc',
-                theme: '#000000'
-            },
-            {
-                name: '烟花易冷',
-                artist: '周杰伦',
-                url: 'https://file.imsyy.top/music/songs/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%83%9F%E8%8A%B1%E6%98%93%E5%86%B7.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000000bviBl4FjTpO_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%83%9F%E8%8A%B1%E6%98%93%E5%86%B7.lrc',
-                theme: '#86b5bb'
-            },
-            {
-                name: '给我一首歌的时间',
-                artist: '周杰伦',
-                url: 'https://file.imsyy.top/music/songs/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%BB%99%E6%88%91%E4%B8%80%E9%A6%96%E6%AD%8C%E7%9A%84%E6%97%B6%E9%97%B4.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000002Neh8l0uciQZ_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E5%91%A8%E6%9D%B0%E4%BC%A6-%E7%BB%99%E6%88%91%E4%B8%80%E9%A6%96%E6%AD%8C%E7%9A%84%E6%97%B6%E9%97%B4.lrc',
-                theme: '#e3ae55'
-            },
-            {
-                name: '千里之外',
-                artist: '周杰伦 / 费玉清',
-                url: 'https://file.imsyy.top/music/songs/%E5%91%A8%E6%9D%B0%E4%BC%A6%26%E8%B4%B9%E7%8E%89%E6%B8%85-%E5%8D%83%E9%87%8C%E4%B9%8B%E5%A4%96.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000002jLGWe16Tf1H_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E5%91%A8%E6%9D%B0%E4%BC%A6%26%E8%B4%B9%E7%8E%89%E6%B8%85-%E5%8D%83%E9%87%8C%E4%B9%8B%E5%A4%96.lrc',
-                theme: '#171513'
-            },
-            {
-                name: '单车',
-                artist: '陈奕迅',
-                url: 'https://file.imsyy.top/music/songs/%E9%99%88%E5%A5%95%E8%BF%85-%E5%8D%95%E8%BD%A6.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000004S8YQr3UmEbG_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E9%99%88%E5%A5%95%E8%BF%85-%E5%8D%95%E8%BD%A6i.lrc',
-                theme: '#32201f'
-            },
-            {
-                name: '浮夸',
-                artist: '陈奕迅',
-                url: 'https://file.imsyy.top/music/songs/%E9%99%88%E5%A5%95%E8%BF%85-%E6%B5%AE%E5%A4%B8.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003J6fvc0bVJon_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E9%99%88%E5%A5%95%E8%BF%85-%E6%B5%AE%E5%A4%B8.lrc',
-                theme: '#040402'
-            },
-            {
-                name: '十年',
-                artist: '陈奕迅',
-                url: 'https://file.imsyy.top/music/songs/%E9%99%88%E5%A5%95%E8%BF%85-%E6%B5%AE%E5%A4%B8.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003J6fvc0bVJon_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E9%99%88%E5%A5%95%E8%BF%85-%E6%B5%AE%E5%A4%B8.lrc',
-                theme: '#040402'
-            },
-            {
-                name: '一丝不挂',
-                artist: '陈奕迅',
-                url: 'https://file.imsyy.top/music/songs/%E9%99%88%E5%A5%95%E8%BF%85-%E4%B8%80%E4%B8%9D%E4%B8%8D%E6%8C%82.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000001sjRhH0wqa4Q_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E9%99%88%E5%A5%95%E8%BF%85-%E4%B8%80%E4%B8%9D%E4%B8%8D%E6%8C%82.lrc',
-                theme: '#0d0d0d'
-            },
-            {
-                name: '麻雀',
-                artist: '李荣浩',
-                url: 'https://file.imsyy.top/music/songs/%E6%9D%8E%E8%8D%A3%E6%B5%A9-%E9%BA%BB%E9%9B%80.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000003P3ByD1n8nBK_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E6%9D%8E%E8%8D%A3%E6%B5%A9-%E9%BA%BB%E9%9B%80.lrc',
-                theme: '#849fbd'
-            },
-            {
-                name: '老街',
-                artist: '李荣浩',
-                url: 'https://file.imsyy.top/music/songs/%E6%9D%8E%E8%8D%A3%E6%B5%A9-%E8%80%81%E8%A1%97.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000001LP8hk0a6pOp_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E6%9D%8E%E8%8D%A3%E6%B5%A9-%E8%80%81%E8%A1%97.lrc',
-                theme: '#e0d7bb'
-            },
-            {
-                name: '年少有为',
-                artist: '李荣浩',
-                url: 'https://file.imsyy.top/music/songs/%E6%9D%8E%E8%8D%A3%E6%B5%A9-%E5%B9%B4%E5%B0%91%E6%9C%89%E4%B8%BA.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000000RLvtE1eDyOs_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E6%9D%8E%E8%8D%A3%E6%B5%A9-%E5%B9%B4%E5%B0%91%E6%9C%89%E4%B8%BA.lrc',
-                theme: '#d2ddd5'
-            },
-            {
-                name: '爸爸妈妈',
-                artist: '李荣浩',
-                url: 'https://file.imsyy.top/music/songs/%E6%9D%8E%E8%8D%A3%E6%B5%A9-%E7%88%B8%E7%88%B8%E5%A6%88%E5%A6%88.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000001fi1zG0EjU2u_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E6%9D%8E%E8%8D%A3%E6%B5%A9-%E7%88%B8%E7%88%B8%E5%A6%88%E5%A6%88.lrc',
-                theme: '#aec3ce'
-            },
-            {
-                name: '干杯',
-                artist: '五月天',
-                url: 'https://file.imsyy.top/music/songs/%E4%BA%94%E6%9C%88%E5%A4%A9-%E5%B9%B2%E6%9D%AF.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000001fbipy4azgKM_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E4%BA%94%E6%9C%88%E5%A4%A9-%E5%B9%B2%E6%9D%AF.lrc',
-                theme: '#0f1e32'
-            },
-            {
-                name: '倔强',
-                artist: '五月天',
-                url: 'https://file.imsyy.top/music/songs/%E4%BA%94%E6%9C%88%E5%A4%A9-%E5%80%94%E5%BC%BA.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M0000006MmDz4Hl2Ud_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E4%BA%94%E6%9C%88%E5%A4%A9-%E5%80%94%E5%BC%BA.lrc',
-                theme: '#b3dae1'
-            },
-            {
-                name: '你不是真正的快乐',
-                artist: '五月天',
-                url: 'https://file.imsyy.top/music/songs/%E4%BA%94%E6%9C%88%E5%A4%A9-%E4%BD%A0%E4%B8%8D%E6%98%AF%E7%9C%9F%E6%AD%A3%E7%9A%84%E5%BF%AB%E4%B9%90.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M0000020I7sO0ayXhN_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E4%BA%94%E6%9C%88%E5%A4%A9-%E4%BD%A0%E4%B8%8D%E6%98%AF%E7%9C%9F%E6%AD%A3%E7%9A%84%E5%BF%AB%E4%B9%90.lrc',
-                theme: '#0a0708'
-            },
-            {
-                name: '派对动物',
-                artist: '五月天',
-                url: 'https://file.imsyy.top/music/songs/%E4%BA%94%E6%9C%88%E5%A4%A9-%E6%B4%BE%E5%AF%B9%E5%8A%A8%E7%89%A9.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000002fRO0N4FftzY_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/%E4%BA%94%E6%9C%88%E5%A4%A9-%E6%B4%BE%E5%AF%B9%E5%8A%A8%E7%89%A9.lrc',
-                theme: '#d0e8f2'
-            },
-            {
-                name: 'Jackpot',
-                artist: 'TheFatRat',
-                url: 'https://file.imsyy.top/music/songs/TheFatRat-Jackpot.mp3',
-                cover: 'https://p2.music.126.net/MoyUJHTq1RcFvGy3N3Ooxg==/18596040161820969.jpg?param=130y130',
-                lrc: 'https://file.imsyy.top/music/lrc/music.lrc',
-                theme: '#813D25'
-            },
-            {
-                name: 'All About Us',
-                artist: 'He Is We / Owl City',
-                url: 'https://file.imsyy.top/music/songs/He%20Is%20We%26Owl%20City-All%20About%20Us.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000004b2Efp2dEWlo_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/He%20Is%20We%26Owl%20City-All%20About%20Us.lrc',
-                theme: '#ee5a75'
-            },
-            {
-                name: 'You\'re Not Alone',
-                artist: 'Owl City / Britt Nicole',
-                url: 'https://file.imsyy.top/music/songs/Owl%20City%26Britt%20Nicole-You\'re%20Not%20Alone.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000002ke9Cq3KeWYj_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/Owl%20City%26Britt%20Nicole-You\'re%20Not%20Alone.lrc',
-                theme: '#eff8fa'
-            },
-            {
-                name: 'Good Time',
-                artist: 'Owl City / Carly Rae Jepsen',
-                url: 'https://file.imsyy.top/music/songs/Owl%20City%26Carly%20Rae%20Jepsen-Good%20Time.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000001mat8F3tAzsu_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/Owl%20City%26Carly%20Rae%20Jepsen-Good%20Time.lrc',
-                theme: '#dd111c'
-            },
-            {
-                name: 'Unbelievable',
-                artist: 'Owl City / Hanson',
-                url: 'https://file.imsyy.top/music/songs/Owl%20City%26Hanson-Unbelievable.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000004O8zk80vaqfl_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/Owl%20City%26Hanson-Unbelievable.lrc',
-                theme: '#de7227'
-            },
-            {
-                name: 'Fireflies',
-                artist: 'Owl City',
-                url: 'https://file.imsyy.top/music/songs/Owl%20City-Fireflies.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000002FEF7L03Cv7T_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/Owl%20City-Fireflies.lrc',
-                theme: '#33658d'
-            },
-            {
-                name: 'Gold',
-                artist: 'Owl City',
-                url: 'https://file.imsyy.top/music/songs/Owl%20City-Gold.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000001Y76KO1Vpg7b_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/Owl%20City-Gold.lrc',
-                theme: '#94c1de'
-            },
-            {
-                name: 'The Saltwater Room',
-                artist: 'Owl City',
-                url: 'https://file.imsyy.top/music/songs/Owl%20City-The%20Saltwater%20Room.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M000002FEF7L03Cv7T_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/Owl%20City-The%20Saltwater%20Room.lrc',
-                theme: '#33658d'
-            },
-            {
-                name: 'When Can I See You Again？',
-                artist: 'Owl City',
-                url: 'https://file.imsyy.top/music/songs/Owl%20City-When%20Can%20I%20See%20You%20Again%EF%BC%9F.mp3',
-                cover: 'https://y.gtimg.cn/music/photo_new/T002R300x300M0000034UcqG3UwYdy_1.jpg?max_age=2592000',
-                lrc: 'https://file.imsyy.top/music/lrc/Owl%20City-When%20Can%20I%20See%20You%20Again%EF%BC%9F.lrc',
-                theme: '#0e1c3a'
-            }
-        ]
-    });
-}

js/time.js

@@ -0,0 +1,73 @@
+var vm = new Vue({
+    el: '#date',
+    data: {
+        hour: "",
+        week: "",
+        curweek: "",
+        day: "",
+        curday: "",
+        month: "",
+        outday: "",
+    },
+    created: function () { //这里是定时器
+        this.timer();
+        setInterval(this.timer, 60000);
+    },
+    methods: {
+        timer: function () {
+            var myDate = new Date();
+            var myYear = myDate.getFullYear(); // 获取当前年份
+            var myMonth = myDate.getMonth() + 1; // 获取当前月份
+            var myDay = myDate.getDate(); // 获取当前日（1- 31）
+            var myHours = myDate.getHours(); // 获取当前小时(0-23)
+            var myMinu = myDate.getMinutes(); // 获取当前分钟(0-59)
+            var mySec = myDate.getSeconds(); // 获取当前秒数(0-59)
+            var myWeek = myDate.getDay() + 6; //获取当前星期几(0-6)
+
+            this.hour = myHours;
+            this.year = myYear;
+            this.month = myMonth - 1;
+            this.day = myDay - 1;
+            this.curday = myDay;
+            this.week = myWeek;
+            this.curweek = myWeek + 1;
+            this.minute = myMinu;
+            this.age = myYear - this.yearForYour;
+        },
+        //今天
+        jinduT: function () {
+            var tian = ((this.hour * 60 + this.minute) / 24 / 60 * 100).toFixed(1);
+            return "<div class='progress'><div class='progress-bar' style='width:" + tian + "%'>" + tian + " %" +
+                "</div></div>";
+        },
+        //本周
+        jinduZ: function () {
+            var curdayWithHour = (this.week * 24 * 60 + this.hour * 60 + this.minute) / 7 / 24 / 60;
+            var zhou = (curdayWithHour * 100).toFixed(1);
+            return "<div class='progress'><div class='progress-bar' style='width:" + zhou + "%'>" + zhou + " %" +
+                "</div></div>";
+        },
+        //这个月
+        jinduD: function () {
+            var days = new Date(this.year, this.month + 1, 0).getDate();
+            var yue = ((this.day * 24 * 60 + this.hour * 60 + this.minute) / days / 24 / 60 * 100)
+                .toFixed(1);
+            return "<div class='progress'><div class='progress-bar" + "' style='width:" + yue +
+                "%'>" + yue + " %" + "</div></div>";
+        },
+        //年
+        jinduY: function () {
+            var olddate = new Date(this.year, 0);
+            var nowdate = new Date(this.year, this.month, this.day + 1);
+            var outday = (nowdate - olddate) / (1000 * 60 * 60 * 24) + 1; //
+            this.outday = outday; //已经过去天数
+            var isLeap = (0 === this.year % 4) && (0 === this.year % 100) || (0 === this.year %
+                400);
+            var days = isLeap ? 366 : 365; //今年的天数
+            var ye = (((outday - 1) * 24 * 60 + this.hour * 60 + this.minute) / days / 24 / 60 *
+                100).toFixed(1);
+            return "<div class='progress'><div class='progress-bar" + "' style='width:" + ye +
+                "%'>" + ye + " %" + "</div></div>";
+        }
+    }
+})