From 0a83639ecd386414c455dabe60ce8f3251fba1bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BA=95=E5=B1=82=E7=94=A8=E6=88=B7?= Date: Sun, 26 Sep 2021 20:21:22 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=20=E6=9B=B4=E5=A4=9A?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/mobile.css | 2 +- css/style.css | 48 +++++++-- index.html | 77 ++++++++++++-- js/main.js | 2 +- js/music.js | 283 ------------------------------------------------- js/time.js | 73 +++++++++++++ 6 files changed, 188 insertions(+), 297 deletions(-) delete mode 100644 js/music.js create mode 100644 js/time.js diff --git a/css/mobile.css b/css/mobile.css index 443cf61..83e1869 100644 --- a/css/mobile.css +++ b/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; diff --git a/css/style.css b/css/style.css index 49091a3..a5c578c 100644 --- a/css/style.css +++ b/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; diff --git a/index.html b/index.html index 5c936c4..9544f66 100644 --- a/index.html +++ b/index.html @@ -29,10 +29,8 @@ - - - - + + @@ -218,8 +216,74 @@
- -

还没想好要写些啥

+
+
+ + 时间胶囊 + +
+
+

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

+
+

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

+
+

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

+
+

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

+
+
+
+ + 杂七杂八 + +
+ +
+
+ +
+ 站点监测 +
+ +
+
+ +
+ 播放器 +
+ +
+
+ +
+ Markdown +
+ +
+
+
+
+ +
+ 图片站 +
+ +
+
+ +
+ 文件站 +
+ +
+
+ +
+ 还没搞 +
+ +
+
@@ -233,6 +297,7 @@ + diff --git a/js/main.js b/js/main.js index 2143802..7fb6a92 100644 --- a/js/main.js +++ b/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 World !"; document.getElementById("change1").innerHTML = "一个建立于 21 世纪的小站，存活于互联网的边缘"; diff --git a/js/music.js b/js/music.js deleted file mode 100644 index fa2d776..0000000 --- a/js/music.js +++ /dev/null @@ -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' - } - ] - }); -} \ No newline at end of file diff --git a/js/time.js b/js/time.js new file mode 100644 index 0000000..5b2a833 --- /dev/null +++ b/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 "
" + tian + " %" + + "
"; + }, + //本周 + jinduZ: function () { + var curdayWithHour = (this.week * 24 * 60 + this.hour * 60 + this.minute) / 7 / 24 / 60; + var zhou = (curdayWithHour * 100).toFixed(1); + return "
" + zhou + " %" + + "
"; + }, + //这个月 + 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 "
" + yue + " %" + "
"; + }, + //年 + 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 "
" + ye + " %" + "
"; + } + } +}) \ No newline at end of file