音乐控件优化 & JS 优化

README.md

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

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

js/lantern.js

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

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&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,28 +389,28 @@ 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 = `
  _____ __  __  _______     ____     __
 |_   _|  \\/  |/ ____\\ \\   / /\\ \\   / /
   | | | \\  / | (___  \\ \\_/ /  \\ \\_/ / 
   | | | |\\/| |\\___ \\  \\   /    \\   /  
  _| |_| |  | |____) |  | |      | |   
 |_____|_|  |_|_____/   |_|      |_|                                                     
 `
-var content = `
+let content = `
 版 本 号：3.4
 更新日期：2022-07-24
 

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>");

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