音乐控件优化 & JS 优化
This commit is contained in:
parent
c3b0dcd6cf
commit
d22c329264
@ -25,8 +25,9 @@
|
|||||||
- [x] 时光进度条
|
- [x] 时光进度条
|
||||||
- [x] 音乐播放器
|
- [x] 音乐播放器
|
||||||
- [x] 移动端适配
|
- [x] 移动端适配
|
||||||
* [ ] 还没想好呢
|
|
||||||
|
|
||||||
|
* [ ] 去除 jQuery 依赖
|
||||||
|
* [ ] VUE 重构
|
||||||
|
|
||||||
### 天气
|
### 天气
|
||||||
|
|
||||||
@ -98,9 +99,9 @@
|
|||||||
更改 `music.js` 的参数即可实现自定义歌单列表
|
更改 `music.js` 的参数即可实现自定义歌单列表
|
||||||
|
|
||||||
```js
|
```js
|
||||||
var server = "netease"; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我
|
let server = "netease"; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我
|
||||||
var type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片
|
let type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片
|
||||||
var id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID
|
let id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID
|
||||||
```
|
```
|
||||||
|
|
||||||
### 字体
|
### 字体
|
||||||
|
10
README_EN.md
10
README_EN.md
@ -25,7 +25,9 @@ Simple little homepage, had enough of the original one and made a new one
|
|||||||
- [x] Time progress bar
|
- [x] Time progress bar
|
||||||
- [x] Music player
|
- [x] Music player
|
||||||
- [x] Mobile adaptation
|
- [x] Mobile adaptation
|
||||||
* [ ] Haven't thought about it yet
|
|
||||||
|
* [ ] Remove jQuery dependency
|
||||||
|
* [ ] VUE refactoring
|
||||||
|
|
||||||
### Weather
|
### Weather
|
||||||
|
|
||||||
@ -98,9 +100,9 @@ This project uses `json` file to configure the site content, the configuration i
|
|||||||
Change the parameters of `music.js` to achieve a custom song list
|
Change the parameters of `music.js` to achieve a custom song list
|
||||||
|
|
||||||
```js
|
```js
|
||||||
var server = "netease"; //netease; tencent; kugou; xiami; kuwo;
|
let server = "netease"; //netease; tencent; kugou; xiami; kuwo;
|
||||||
var type = "playlist"; //song; playlist; album;
|
let type = "playlist"; //song; playlist; album;
|
||||||
var id = "7452421335"; //album ID; song ID; playlist ID;
|
let id = "7452421335"; //album ID; song ID; playlist ID;
|
||||||
```
|
```
|
||||||
|
|
||||||
### Fonts
|
### Fonts
|
||||||
|
@ -1,18 +0,0 @@
|
|||||||
.message,
|
|
||||||
.time,
|
|
||||||
.hitokoto,
|
|
||||||
.music,
|
|
||||||
.link-card,
|
|
||||||
.more,
|
|
||||||
.box-wrapper,
|
|
||||||
footer {
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.link-card:hover {
|
|
||||||
background: rgb(0, 0, 0, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
background: rgba(0, 0, 0, 0.2) !important;
|
|
||||||
}
|
|
@ -9,13 +9,13 @@
|
|||||||
"use strict";
|
"use strict";
|
||||||
! function (t, e) {
|
! function (t, e) {
|
||||||
void 0 === e && (e = {});
|
void 0 === e && (e = {});
|
||||||
var n = e.insertAt;
|
let n = e.insertAt;
|
||||||
if (t && "undefined" != typeof document) {
|
if (t && "undefined" != typeof document) {
|
||||||
var r = document.head || document.getElementsByTagName("head")[0],
|
let r = document.head || document.getElementsByTagName("head")[0],
|
||||||
a = document.createElement("style");
|
a = document.createElement("style");
|
||||||
a.type = "text/css", "top" === n && r.firstChild ? r.insertBefore(a, r.firstChild) : r.appendChild(a), a.styleSheet ? a.styleSheet.cssText = t : a.appendChild(document.createTextNode(t))
|
a.type = "text/css", "top" === n && r.firstChild ? r.insertBefore(a, r.firstChild) : r.appendChild(a), a.styleSheet ? a.styleSheet.cssText = t : a.appendChild(document.createTextNode(t))
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
var t;
|
let t;
|
||||||
(t = document.createElement("div")).className = "j-china-lantern", t.innerHTML = '<div class="lantern__warpper"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">新</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div><div class="lantern__warpper lantern__secondary"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">年</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div>', document.body.appendChild(t)
|
(t = document.createElement("div")).className = "j-china-lantern", t.innerHTML = '<div class="lantern__warpper"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">新</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div><div class="lantern__warpper lantern__secondary"><div class="lantern__box"><div class="lantern__line"></div><div class="lantern__circle"><div class="lantern__ellipse"><div class="lantern__text">年</div></div></div><div class="lantern__tail"><div class="lantern__rect"></div><div class="lantern__junction"></div></div></div></div>', document.body.appendChild(t)
|
||||||
}));
|
}));
|
81
js/main.js
81
js/main.js
@ -66,7 +66,7 @@ window.addEventListener('load', function () {
|
|||||||
}, 800);
|
}, 800);
|
||||||
|
|
||||||
//延迟加载音乐播放器
|
//延迟加载音乐播放器
|
||||||
var element = document.createElement("script");
|
let element = document.createElement("script");
|
||||||
element.src = "./js/music.js";
|
element.src = "./js/music.js";
|
||||||
document.body.appendChild(element);
|
document.body.appendChild(element);
|
||||||
|
|
||||||
@ -97,25 +97,6 @@ setTimeout(function () {
|
|||||||
// new_element.setAttribute("src","./js/lantern.js");
|
// new_element.setAttribute("src","./js/lantern.js");
|
||||||
// document.body.appendChild(new_element);
|
// document.body.appendChild(new_element);
|
||||||
|
|
||||||
//火狐浏览器独立样式
|
|
||||||
if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
|
|
||||||
var head = document.getElementsByTagName('head')[0];
|
|
||||||
var link = document.createElement('link');
|
|
||||||
link.href = './css/firefox.css';
|
|
||||||
link.rel = 'stylesheet';
|
|
||||||
link.type = 'text/css';
|
|
||||||
head.appendChild(link);
|
|
||||||
window.addEventListener('load', function () {
|
|
||||||
setTimeout(function () {
|
|
||||||
iziToast.show({
|
|
||||||
timeout: 8000,
|
|
||||||
icon: "fa-solid fa-circle-exclamation",
|
|
||||||
message: '您正在使用火狐浏览器,部分功能可能不支持'
|
|
||||||
});
|
|
||||||
}, 3800);
|
|
||||||
}, false)
|
|
||||||
}
|
|
||||||
|
|
||||||
//获取一言
|
//获取一言
|
||||||
fetch('https://v1.hitokoto.cn?max_length=24')
|
fetch('https://v1.hitokoto.cn?max_length=24')
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
@ -125,11 +106,11 @@ fetch('https://v1.hitokoto.cn?max_length=24')
|
|||||||
})
|
})
|
||||||
.catch(console.error)
|
.catch(console.error)
|
||||||
|
|
||||||
var times = 0;
|
let times = 0;
|
||||||
$('#hitokoto').click(function () {
|
$('#hitokoto').click(function () {
|
||||||
if (times == 0) {
|
if (times == 0) {
|
||||||
times = 1;
|
times = 1;
|
||||||
var index = setInterval(function () {
|
let index = setInterval(function () {
|
||||||
times--;
|
times--;
|
||||||
if (times == 0) {
|
if (times == 0) {
|
||||||
clearInterval(index);
|
clearInterval(index);
|
||||||
@ -183,11 +164,11 @@ function getWeather() {
|
|||||||
|
|
||||||
getWeather();
|
getWeather();
|
||||||
|
|
||||||
var wea = 0;
|
let wea = 0;
|
||||||
$('#upWeather').click(function () {
|
$('#upWeather').click(function () {
|
||||||
if (wea == 0) {
|
if (wea == 0) {
|
||||||
wea = 1;
|
wea = 1;
|
||||||
var index = setInterval(function () {
|
let index = setInterval(function () {
|
||||||
wea--;
|
wea--;
|
||||||
if (wea == 0) {
|
if (wea == 0) {
|
||||||
clearInterval(index);
|
clearInterval(index);
|
||||||
@ -209,20 +190,20 @@ $('#upWeather').click(function () {
|
|||||||
});
|
});
|
||||||
|
|
||||||
//获取时间
|
//获取时间
|
||||||
var t = null;
|
let t = null;
|
||||||
t = setTimeout(time, 1000);
|
t = setTimeout(time, 1000);
|
||||||
|
|
||||||
function time() {
|
function time() {
|
||||||
clearTimeout(t);
|
clearTimeout(t);
|
||||||
dt = new Date();
|
dt = new Date();
|
||||||
var y = dt.getYear() + 1900;
|
let y = dt.getYear() + 1900;
|
||||||
var mm = dt.getMonth() + 1;
|
let mm = dt.getMonth() + 1;
|
||||||
var d = dt.getDate();
|
let d = dt.getDate();
|
||||||
var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
|
let weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
|
||||||
var day = dt.getDay();
|
let day = dt.getDay();
|
||||||
var h = dt.getHours();
|
let h = dt.getHours();
|
||||||
var m = dt.getMinutes();
|
let m = dt.getMinutes();
|
||||||
var s = dt.getSeconds();
|
let s = dt.getSeconds();
|
||||||
if (h < 10) {
|
if (h < 10) {
|
||||||
h = "0" + h;
|
h = "0" + h;
|
||||||
}
|
}
|
||||||
@ -284,30 +265,32 @@ $("#telegram").mouseover(function () {
|
|||||||
});
|
});
|
||||||
|
|
||||||
//自动变灰
|
//自动变灰
|
||||||
var myDate = new Date;
|
let myDate = new Date;
|
||||||
var mon = myDate.getMonth() + 1;
|
let mon = myDate.getMonth() + 1;
|
||||||
var date = myDate.getDate();
|
let date = myDate.getDate();
|
||||||
var days = ['4.4', '5.12', '7.7', '9.9', '9.18', '12.13'];
|
let days = ['4.4', '5.12', '7.7', '9.9', '9.18', '12.13'];
|
||||||
for (var day of days) {
|
for (let day of days) {
|
||||||
var d = day.split('.');
|
let d = day.split('.');
|
||||||
if (mon == d[0] && date == d[1]) {
|
if (mon == d[0] && date == d[1]) {
|
||||||
document.write(
|
document.write(
|
||||||
'<style>html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none}</style>'
|
'<style>html{-webkit-filter:grayscale(100%);-moz-filter:grayscale(100%);-ms-filter:grayscale(100%);-o-filter:grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);_filter:none}</style>'
|
||||||
)
|
);
|
||||||
$("#change").html("Silence in silence");
|
$("#change").html("Silence in silence");
|
||||||
$("#change1").html("今天是中国国家纪念日,全站已切换为黑白模式");
|
$("#change1").html("今天是中国国家纪念日,全站已切换为黑白模式");
|
||||||
window.addEventListener('load', function () {
|
window.addEventListener('load', function () {
|
||||||
|
setTimeout(function () {
|
||||||
iziToast.show({
|
iziToast.show({
|
||||||
timeout: 14000,
|
timeout: 14000,
|
||||||
icon: "fa-solid fa-clock",
|
icon: "fa-solid fa-clock",
|
||||||
message: '今天是中国国家纪念日'
|
message: '今天是中国国家纪念日'
|
||||||
});
|
});
|
||||||
|
}, 3800);
|
||||||
}, false);
|
}, false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//更多页面切换
|
//更多页面切换
|
||||||
var shoemore = false;
|
let shoemore = false;
|
||||||
$('#switchmore').on('click', function () {
|
$('#switchmore').on('click', function () {
|
||||||
shoemore = !shoemore;
|
shoemore = !shoemore;
|
||||||
if (shoemore && $(document).width() >= 990) {
|
if (shoemore && $(document).width() >= 990) {
|
||||||
@ -327,7 +310,7 @@ $('#close').on('click', function () {
|
|||||||
});
|
});
|
||||||
|
|
||||||
//移动端菜单栏切换
|
//移动端菜单栏切换
|
||||||
var switchmenu = false;
|
let switchmenu = false;
|
||||||
$('#switchmenu').on('click', function () {
|
$('#switchmenu').on('click', function () {
|
||||||
switchmenu = !switchmenu;
|
switchmenu = !switchmenu;
|
||||||
if (switchmenu) {
|
if (switchmenu) {
|
||||||
@ -377,7 +360,7 @@ window.addEventListener('load', function () {
|
|||||||
})
|
})
|
||||||
|
|
||||||
//移动端切换功能区
|
//移动端切换功能区
|
||||||
var changemore = false;
|
let changemore = false;
|
||||||
$('#changemore').on('click', function () {
|
$('#changemore').on('click', function () {
|
||||||
changemore = !changemore;
|
changemore = !changemore;
|
||||||
if (changemore) {
|
if (changemore) {
|
||||||
@ -406,20 +389,20 @@ document.oncontextmenu = function () {
|
|||||||
|
|
||||||
//控制台输出
|
//控制台输出
|
||||||
console.clear();
|
console.clear();
|
||||||
var styleTitle1 = `
|
let styleTitle1 = `
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: rgb(244,167,89);
|
color: rgb(244,167,89);
|
||||||
`
|
`
|
||||||
var styleTitle2 = `
|
let styleTitle2 = `
|
||||||
font-size:12px;
|
font-size:12px;
|
||||||
color: rgb(244,167,89);
|
color: rgb(244,167,89);
|
||||||
`
|
`
|
||||||
var styleContent = `
|
let styleContent = `
|
||||||
color: rgb(30,152,255);
|
color: rgb(30,152,255);
|
||||||
`
|
`
|
||||||
var title1 = '無名の主页'
|
let title1 = '無名の主页'
|
||||||
var title2 = `
|
let title2 = `
|
||||||
_____ __ __ _______ ____ __
|
_____ __ __ _______ ____ __
|
||||||
|_ _| \\/ |/ ____\\ \\ / /\\ \\ / /
|
|_ _| \\/ |/ ____\\ \\ / /\\ \\ / /
|
||||||
| | | \\ / | (___ \\ \\_/ / \\ \\_/ /
|
| | | \\ / | (___ \\ \\_/ / \\ \\_/ /
|
||||||
@ -427,7 +410,7 @@ var title2 = `
|
|||||||
_| |_| | | |____) | | | | |
|
_| |_| | | |____) | | | | |
|
||||||
|_____|_| |_|_____/ |_| |_|
|
|_____|_| |_|_____/ |_| |_|
|
||||||
`
|
`
|
||||||
var content = `
|
let content = `
|
||||||
版 本 号:3.4
|
版 本 号:3.4
|
||||||
更新日期:2022-07-24
|
更新日期:2022-07-24
|
||||||
|
|
||||||
|
10
js/music.js
10
js/music.js
@ -9,9 +9,9 @@ https://api.wuenci.com/meting/api/
|
|||||||
GitHub:https://github.com/imsyy/home
|
GitHub:https://github.com/imsyy/home
|
||||||
版权所有,请勿删除
|
版权所有,请勿删除
|
||||||
*/
|
*/
|
||||||
var server = "netease"; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我
|
let server = "netease"; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我
|
||||||
var type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片
|
let type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片
|
||||||
var id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID
|
let id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID
|
||||||
|
|
||||||
$.ajax({
|
$.ajax({
|
||||||
url: "https://api.wuenci.com/meting/api/?server=" + server + "&type=" + type + "&id=" + id,
|
url: "https://api.wuenci.com/meting/api/?server=" + server + "&type=" + type + "&id=" + id,
|
||||||
@ -125,8 +125,8 @@ $.ajax({
|
|||||||
});
|
});
|
||||||
|
|
||||||
//音量调节
|
//音量调节
|
||||||
$("#volume").on('click touchend', function () {
|
$("#volume").on('input propertychange touchend', function () {
|
||||||
var x = $("#volume").val();
|
let x = $("#volume").val();
|
||||||
ap.volume(x, true);
|
ap.volume(x, true);
|
||||||
if (x == 0) {
|
if (x == 0) {
|
||||||
$("#volume-ico").html("<i class='fa-solid fa-volume-xmark'></i>");
|
$("#volume-ico").html("<i class='fa-solid fa-volume-xmark'></i>");
|
||||||
|
48
js/set.js
48
js/set.js
@ -8,7 +8,7 @@ GitHub:https://github.com/imsyy/home
|
|||||||
/* 自定义配置 */
|
/* 自定义配置 */
|
||||||
/* 尚未完善 */
|
/* 尚未完善 */
|
||||||
$(function () {
|
$(function () {
|
||||||
var url = "../setting.json"
|
let url = "../setting.json"
|
||||||
$.getJSON(
|
$.getJSON(
|
||||||
url,
|
url,
|
||||||
function (data) {
|
function (data) {
|
||||||
@ -70,7 +70,7 @@ function setBgImg(bg_img) {
|
|||||||
|
|
||||||
// 获取背景图片 Cookies
|
// 获取背景图片 Cookies
|
||||||
function getBgImg() {
|
function getBgImg() {
|
||||||
var bg_img_local = Cookies.get('bg_img');
|
let bg_img_local = Cookies.get('bg_img');
|
||||||
if (bg_img_local && bg_img_local !== "{}") {
|
if (bg_img_local && bg_img_local !== "{}") {
|
||||||
return JSON.parse(bg_img_local);
|
return JSON.parse(bg_img_local);
|
||||||
} else {
|
} else {
|
||||||
@ -79,7 +79,7 @@ function getBgImg() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var bg_img_preinstall = {
|
let bg_img_preinstall = {
|
||||||
"type": "1", // 1:默认背景 2:每日一图 3:随机风景 4:随机动漫
|
"type": "1", // 1:默认背景 2:每日一图 3:随机风景 4:随机动漫
|
||||||
"2": "https://api.dujin.org/bing/1920.php", // 每日一图
|
"2": "https://api.dujin.org/bing/1920.php", // 每日一图
|
||||||
"3": "https://api.ixiaowai.cn/gqapi/gqapi.php", // 随机风景
|
"3": "https://api.ixiaowai.cn/gqapi/gqapi.php", // 随机风景
|
||||||
@ -88,7 +88,7 @@ var bg_img_preinstall = {
|
|||||||
|
|
||||||
// 更改背景图片
|
// 更改背景图片
|
||||||
function setBgImgInit() {
|
function setBgImgInit() {
|
||||||
var bg_img = getBgImg();
|
let bg_img = getBgImg();
|
||||||
$("input[name='wallpaper-type'][value=" + bg_img["type"] + "]").click();
|
$("input[name='wallpaper-type'][value=" + bg_img["type"] + "]").click();
|
||||||
|
|
||||||
switch (bg_img["type"]) {
|
switch (bg_img["type"]) {
|
||||||
@ -112,48 +112,14 @@ $(document).ready(function () {
|
|||||||
setBgImgInit();
|
setBgImgInit();
|
||||||
// 设置背景图片
|
// 设置背景图片
|
||||||
$("#wallpaper").on("click", ".set-wallpaper", function () {
|
$("#wallpaper").on("click", ".set-wallpaper", function () {
|
||||||
var type = $(this).val();
|
let type = $(this).val();
|
||||||
var bg_img = getBgImg();
|
let bg_img = getBgImg();
|
||||||
bg_img["type"] = type;
|
bg_img["type"] = type;
|
||||||
|
|
||||||
if (type === "1") {
|
|
||||||
setBgImg(bg_img);
|
|
||||||
$('#bg').attr('src', `./img/background${1 + ~~(Math.random() * 10)}.webp`) //随机默认壁纸
|
|
||||||
iziToast.show({
|
iziToast.show({
|
||||||
icon: "fa-solid fa-image",
|
icon: "fa-solid fa-image",
|
||||||
timeout: 2500,
|
timeout: 2500,
|
||||||
message: '壁纸设置成功',
|
message: '壁纸设置成功,刷新后生效',
|
||||||
});
|
});
|
||||||
};
|
|
||||||
|
|
||||||
if (type === "2") {
|
|
||||||
setBgImg(bg_img);
|
setBgImg(bg_img);
|
||||||
$('#bg').attr('src', bg_img_preinstall[2]); //必应每日
|
|
||||||
iziToast.show({
|
|
||||||
icon: "fa-solid fa-image",
|
|
||||||
timeout: 2500,
|
|
||||||
message: '壁纸设置成功',
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
if (type === "3") {
|
|
||||||
setBgImg(bg_img);
|
|
||||||
$('#bg').attr('src', bg_img_preinstall[3]); //随机风景
|
|
||||||
iziToast.show({
|
|
||||||
icon: "fa-solid fa-image",
|
|
||||||
timeout: 2500,
|
|
||||||
message: '壁纸设置成功',
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
if (type === "4") {
|
|
||||||
setBgImg(bg_img);
|
|
||||||
$('#bg').attr('src', bg_img_preinstall[4]); //随机动漫
|
|
||||||
iziToast.show({
|
|
||||||
icon: "fa-solid fa-image",
|
|
||||||
timeout: 2500,
|
|
||||||
message: '壁纸设置成功',
|
|
||||||
});
|
|
||||||
};
|
|
||||||
});
|
});
|
||||||
});
|
});
|
Loading…
Reference in New Issue
Block a user