音乐控件优化 & JS 优化

This commit is contained in:
底层用户 2022-08-02 10:25:29 +08:00
parent c3b0dcd6cf
commit d22c329264
7 changed files with 68 additions and 134 deletions

View File

@ -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
``` ```
### 字体 ### 字体

View File

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

View File

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

View File

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

View File

@ -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&nbsp;in&nbsp;silence"); $("#change").html("Silence&nbsp;in&nbsp;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

View File

@ -9,9 +9,9 @@ https://api.wuenci.com/meting/api/
GitHubhttps://github.com/imsyy/home GitHubhttps://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>");

View File

@ -8,7 +8,7 @@ GitHubhttps://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: '壁纸设置成功',
});
};
}); });
}); });