新增 更多页面

This commit is contained in:
底层用户 2021-09-26 20:21:22 +08:00
parent 4d636b7c8f
commit 0a83639ecd
6 changed files with 188 additions and 297 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.css">
<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>-->
<!--引入 Vue-->
<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>
<!-- 百度统计 -->
@ -218,8 +216,74 @@
</div>
<!--更多内容-->
<div class="more cards">
<i class="fad fa-comment-alt-dots"></i>
<p class="text" style="margin-top: 1.5rem;">还没想好要写些啥</p>
<div class="close fixed-top" onclick="switchMore()"><i class="fad fa-times-circle"></i></div>
<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>

View File

@ -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 世纪的小站,存活于互联网的边缘";

View File

@ -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'
}
]
});
}

73
js/time.js Normal file
View File

@ -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>";
}
}
})