音乐控件优化 & JS 优化
This commit is contained in:
底层用户
parent
c3b0dcd6cf
commit
d22c329264
@ -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
|
||||
```
|
||||
|
||||
### 字体
|
||||
|
||||
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] 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
|
||||
|
||||
@ -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";
|
||||
! 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)
|
||||
}));
|
||||
91
js/main.js
91
js/main.js
@ -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 in 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
|
||||
|
||||
|
||||
10
js/music.js
10
js/music.js
@ -9,9 +9,9 @@ https://api.wuenci.com/meting/api/
|
||||
GitHub：https://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>");
|
||||
|
||||
58
js/set.js
58
js/set.js
@ -8,7 +8,7 @@ GitHub：https://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);
|
||||
});
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user