音乐控件优化 & 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] 移动端适配
* [ ] 还没想好呢
* [ ] 去除 jQuery 依赖
* [ ] VUE 重构
### 天气
@ -98,9 +99,9 @@
更改 `music.js` 的参数即可实现自定义歌单列表
```js
var server = "netease"; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我
var type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片
var id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID
let server = "netease"; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我
let type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片
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] Music player
- [x] Mobile adaptation
* [ ] Haven't thought about it yet
* [ ] Remove jQuery dependency
* [ ] VUE refactoring
### 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
```js
var server = "netease"; //netease; tencent; kugou; xiami; kuwo;
var type = "playlist"; //song; playlist; album;
var id = "7452421335"; //album ID; song ID; playlist ID;
let server = "netease"; //netease; tencent; kugou; xiami; kuwo;
let type = "playlist"; //song; playlist; album;
let id = "7452421335"; //album ID; song ID; playlist ID;
```
### 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";
! function (t, e) {
void 0 === e && (e = {});
var n = e.insertAt;
let n = e.insertAt;
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.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)
}));

View File

@ -66,7 +66,7 @@ window.addEventListener('load', function () {
}, 800);
//延迟加载音乐播放器
var element = document.createElement("script");
let element = document.createElement("script");
element.src = "./js/music.js";
document.body.appendChild(element);
@ -97,25 +97,6 @@ setTimeout(function () {
// new_element.setAttribute("src","./js/lantern.js");
// 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')
.then(response => response.json())
@ -125,11 +106,11 @@ fetch('https://v1.hitokoto.cn?max_length=24')
})
.catch(console.error)
var times = 0;
let times = 0;
$('#hitokoto').click(function () {
if (times == 0) {
times = 1;
var index = setInterval(function () {
let index = setInterval(function () {
times--;
if (times == 0) {
clearInterval(index);
@ -183,11 +164,11 @@ function getWeather() {
getWeather();
var wea = 0;
let wea = 0;
$('#upWeather').click(function () {
if (wea == 0) {
wea = 1;
var index = setInterval(function () {
let index = setInterval(function () {
wea--;
if (wea == 0) {
clearInterval(index);
@ -209,20 +190,20 @@ $('#upWeather').click(function () {
});
//获取时间
var t = null;
let t = null;
t = setTimeout(time, 1000);
function time() {
clearTimeout(t);
dt = new Date();
var y = dt.getYear() + 1900;
var mm = dt.getMonth() + 1;
var d = dt.getDate();
var weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var day = dt.getDay();
var h = dt.getHours();
var m = dt.getMinutes();
var s = dt.getSeconds();
let y = dt.getYear() + 1900;
let mm = dt.getMonth() + 1;
let d = dt.getDate();
let weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
let day = dt.getDay();
let h = dt.getHours();
let m = dt.getMinutes();
let s = dt.getSeconds();
if (h < 10) {
h = "0" + h;
}
@ -284,30 +265,32 @@ $("#telegram").mouseover(function () {
});
//自动变灰
var myDate = new Date;
var mon = myDate.getMonth() + 1;
var date = myDate.getDate();
var days = ['4.4', '5.12', '7.7', '9.9', '9.18', '12.13'];
for (var day of days) {
var d = day.split('.');
let myDate = new Date;
let mon = myDate.getMonth() + 1;
let date = myDate.getDate();
let days = ['4.4', '5.12', '7.7', '9.9', '9.18', '12.13'];
for (let day of days) {
let d = day.split('.');
if (mon == d[0] && date == d[1]) {
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>'
)
);
$("#change").html("Silence&nbsp;in&nbsp;silence");
$("#change1").html("今天是中国国家纪念日,全站已切换为黑白模式");
window.addEventListener('load', function () {
iziToast.show({
timeout: 14000,
icon: "fa-solid fa-clock",
message: '今天是中国国家纪念日'
});
setTimeout(function () {
iziToast.show({
timeout: 14000,
icon: "fa-solid fa-clock",
message: '今天是中国国家纪念日'
});
}, 3800);
}, false);
}
}
//更多页面切换
var shoemore = false;
let shoemore = false;
$('#switchmore').on('click', function () {
shoemore = !shoemore;
if (shoemore && $(document).width() >= 990) {
@ -327,7 +310,7 @@ $('#close').on('click', function () {
});
//移动端菜单栏切换
var switchmenu = false;
let switchmenu = false;
$('#switchmenu').on('click', function () {
switchmenu = !switchmenu;
if (switchmenu) {
@ -377,7 +360,7 @@ window.addEventListener('load', function () {
})
//移动端切换功能区
var changemore = false;
let changemore = false;
$('#changemore').on('click', function () {
changemore = !changemore;
if (changemore) {
@ -406,20 +389,20 @@ document.oncontextmenu = function () {
//控制台输出
console.clear();
var styleTitle1 = `
let styleTitle1 = `
font-size: 20px;
font-weight: 600;
color: rgb(244,167,89);
`
var styleTitle2 = `
let styleTitle2 = `
font-size:12px;
color: rgb(244,167,89);
`
var styleContent = `
let styleContent = `
color: rgb(30,152,255);
`
var title1 = '無名の主页'
var title2 = `
let title1 = '無名の主页'
let title2 = `
_____ __ __ _______ ____ __
|_ _| \\/ |/ ____\\ \\ / /\\ \\ / /
| | | \\ / | (___ \\ \\_/ / \\ \\_/ /
@ -427,7 +410,7 @@ var title2 = `
_| |_| | | |____) | | | | |
|_____|_| |_|_____/ |_| |_|
`
var content = `
let content = `
3.4
更新日期2022-07-24

View File

@ -9,9 +9,9 @@ https://api.wuenci.com/meting/api/
GitHubhttps://github.com/imsyy/home
版权所有请勿删除
*/
var server = "netease"; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我
var type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片
var id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID
let server = "netease"; //netease: 网易云音乐; tencent: QQ音乐; kugou: 酷狗音乐; xiami: 虾米; kuwo: 酷我
let type = "playlist"; //song: 单曲; playlist: 歌单; album: 唱片
let id = "7452421335"; //封面 ID / 单曲 ID / 歌单 ID
$.ajax({
url: "https://api.wuenci.com/meting/api/?server=" + server + "&type=" + type + "&id=" + id,
@ -125,8 +125,8 @@ $.ajax({
});
//音量调节
$("#volume").on('click touchend', function () {
var x = $("#volume").val();
$("#volume").on('input propertychange touchend', function () {
let x = $("#volume").val();
ap.volume(x, true);
if (x == 0) {
$("#volume-ico").html("<i class='fa-solid fa-volume-xmark'></i>");

View File

@ -8,7 +8,7 @@ GitHubhttps://github.com/imsyy/home
/* 自定义配置 */
/* 尚未完善 */
$(function () {
var url = "../setting.json"
let url = "../setting.json"
$.getJSON(
url,
function (data) {
@ -70,7 +70,7 @@ function setBgImg(bg_img) {
// 获取背景图片 Cookies
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 !== "{}") {
return JSON.parse(bg_img_local);
} else {
@ -79,7 +79,7 @@ function getBgImg() {
}
}
var bg_img_preinstall = {
let bg_img_preinstall = {
"type": "1", // 1:默认背景 2:每日一图 3:随机风景 4:随机动漫
"2": "https://api.dujin.org/bing/1920.php", // 每日一图
"3": "https://api.ixiaowai.cn/gqapi/gqapi.php", // 随机风景
@ -88,7 +88,7 @@ var bg_img_preinstall = {
// 更改背景图片
function setBgImgInit() {
var bg_img = getBgImg();
let bg_img = getBgImg();
$("input[name='wallpaper-type'][value=" + bg_img["type"] + "]").click();
switch (bg_img["type"]) {
@ -112,48 +112,14 @@ $(document).ready(function () {
setBgImgInit();
// 设置背景图片
$("#wallpaper").on("click", ".set-wallpaper", function () {
var type = $(this).val();
var bg_img = getBgImg();
let type = $(this).val();
let bg_img = getBgImg();
bg_img["type"] = type;
if (type === "1") {
setBgImg(bg_img);
$('#bg').attr('src', `./img/background${1 + ~~(Math.random() * 10)}.webp`) //随机默认壁纸
iziToast.show({
icon: "fa-solid fa-image",
timeout: 2500,
message: '壁纸设置成功',
});
};
if (type === "2") {
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: '壁纸设置成功',
});
};
iziToast.show({
icon: "fa-solid fa-image",
timeout: 2500,
message: '壁纸设置成功,刷新后生效',
});
setBgImg(bg_img);
});
});