新增 更多页面
This commit is contained in:
parent
4d636b7c8f
commit
0a83639ecd
@ -206,7 +206,7 @@
|
|||||||
.time,
|
.time,
|
||||||
.link-card,
|
.link-card,
|
||||||
.message {
|
.message {
|
||||||
animation: fade-in 0.5;
|
animation: fade-in;
|
||||||
-webkit-animation: fade-in 0.5s;
|
-webkit-animation: fade-in 0.5s;
|
||||||
-moz-animation: fade-in 0.5s;
|
-moz-animation: fade-in 0.5s;
|
||||||
-o-animation: fade-in 0.5s;
|
-o-animation: fade-in 0.5s;
|
||||||
|
@ -223,12 +223,12 @@ span.time-text {
|
|||||||
backdrop-filter: blur(10px);
|
backdrop-filter: blur(10px);
|
||||||
top: 7%;
|
top: 7%;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 20px;
|
padding: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mores .more {
|
.mores .more {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: space-evenly;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
animation: fade;
|
animation: fade;
|
||||||
@ -238,14 +238,50 @@ span.time-text {
|
|||||||
-ms-animation: fade 0.3s;
|
-ms-animation: fade 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
i.fad.fa-comment-alt-dots {
|
|
||||||
font-size: 2.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mores .col.right {
|
.mores .col.right {
|
||||||
display: none;
|
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 {
|
footer {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
77
index.html
77
index.html
@ -29,10 +29,8 @@
|
|||||||
<!-- 引入 Fontawesome -->
|
<!-- 引入 Fontawesome -->
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css"
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/volantis-x/cdn-fontawesome-pro@master/css/all.min.css"
|
||||||
media="all">
|
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 -->
|
<!-- 引入 jQuery -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
|
||||||
<!-- 百度统计 -->
|
<!-- 百度统计 -->
|
||||||
@ -218,8 +216,74 @@
|
|||||||
</div>
|
</div>
|
||||||
<!--更多内容-->
|
<!--更多内容-->
|
||||||
<div class="more cards">
|
<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;">今日已经度过了大约 {{hour}} 小时</p>
|
||||||
|
<div v-html="jinduT()" class="marginbottom"></div>
|
||||||
|
<p class="date-text">本周已经度过了 {{week}} 天,今天是第 {{curweek}} 天</p>
|
||||||
|
<div v-html="jinduZ()" class="marginbottom"></div>
|
||||||
|
<p class="date-text">本月已经度过了 {{day}} 天,今天是第 {{curday}} 天</p>
|
||||||
|
<div v-html="jinduD()" class="marginbottom"></div>
|
||||||
|
<p class="date-text">{{year}} 年已经度过了 {{month}} 个月,度过了 {{outday}} 天</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>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
@ -233,6 +297,7 @@
|
|||||||
</section>
|
</section>
|
||||||
<!-- JS -->
|
<!-- JS -->
|
||||||
<script type="text/javascript" src="./js/main.js"></script>
|
<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>
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
|
@ -205,7 +205,7 @@ window.addEventListener('load', function () {
|
|||||||
document.getElementById("container").classList.remove('menus');
|
document.getElementById("container").classList.remove('menus');
|
||||||
}
|
}
|
||||||
//移动端隐藏更多页面
|
//移动端隐藏更多页面
|
||||||
if (window.innerWidth <= 660) {
|
if (window.innerWidth <= 990) {
|
||||||
document.getElementById("container").classList.remove('mores');
|
document.getElementById("container").classList.remove('mores');
|
||||||
document.getElementById("change").innerHTML = "Hello World !";
|
document.getElementById("change").innerHTML = "Hello World !";
|
||||||
document.getElementById("change1").innerHTML = "一个建立于 21 世纪的小站,存活于互联网的边缘";
|
document.getElementById("change1").innerHTML = "一个建立于 21 世纪的小站,存活于互联网的边缘";
|
||||||
|
283
js/music.js
283
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'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
});
|
|
||||||
}
|
|
73
js/time.js
Normal file
73
js/time.js
Normal 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>";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
Loading…
Reference in New Issue
Block a user