新增 壁纸设置

css/firefox.css

@@ -1,7 +1,3 @@
-#section {
-    background-image: url(../img/background.jpg) !important;
-}
-
 .message,
 .time,
 .hitokoto,
@@ -10,13 +6,13 @@
 .more,
 .box-wrapper,
 footer {
-    background: rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.3);
 }
 
 .link-card:hover {
-    background: rgb(0, 0, 0, 0.6);
+    background: rgb(0, 0, 0, 0.4);
 }
 
 .progress {
-    background: rgba(0, 0, 0, 0.5) !important;
+    background: rgba(0, 0, 0, 0.2) !important;
 }

css/style.css

@@ -38,12 +38,11 @@ a:hover {
     transition: 0.5s;
 }
 
-#section {
-    /*background-image: url(https://api.ixiaowai.cn/gqapi/gqapi.php), url(../img/background.jpg);*/
-    background-image: url(https://api.dujin.org/bing/1920.php), url(../img/background.jpg);
+/* #section {
+    background-image: url(https://api.dujin.org/bing/1920.php), url(../img/background1.webp);
     background-repeat: no-repeat;
     background-position: center center;
-}
+} */
 
 .noscript {
     z-index: 999999;
@@ -52,6 +51,45 @@ a:hover {
     margin: 14px 0px;
 }
 
+/*背景*/
+.bg-all {
+    z-index: 0;
+    position: absolute;
+    top: calc(0px + 0px);
+    left: 0;
+    width: 100%;
+    height: calc(100% - 0px);
+    transition: .25s;
+}
+
+#bg {
+    transform: scale(1.10);
+    filter: blur(10px);
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transition: opacity 1s, transform .25s, filter .25s;
+    backface-visibility: hidden;
+}
+
+img.error {
+    display: none;
+}
+
+.cover {
+    opacity: 0;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-image: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .5) 100%), radial-gradient(rgba(0, 0, 0, 0) 33%, rgba(0, 0, 0, .3) 166%);
+    transition: .25s;
+}
+
 /*页面样式*/
 section {
     display: block;
@@ -662,10 +700,6 @@ i.iconfont.icon-github1 {
     padding: 0rem 1.5rem;
 }
 
-.set-text {
-    text-align: center;
-}
-
 .btn-group,
 .btn-group-vertical {
     margin-top: 10px;
@@ -694,6 +728,36 @@ i.iconfont.icon-github1 {
     border-color: #eeeeee !important;
 }
 
+#wallpaper {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+}
+
+.form-radio {
+    flex: 1 1 0%;
+    width: 31.3%;
+    min-width: 31.3%;
+    max-width: 31.3%;
+    text-align: center;
+    margin: 1%;
+}
+
+input[type="radio"]+label {
+    padding: 6px 10px;
+    background: #ffffff26;
+    border-radius: 8px;
+    transition: 0.3s;
+    border: 2px solid transparent;
+    width: 100%;
+}
+
+input[type="radio"]:checked+label {
+    background: #ffffff06;
+    border: 2px solid #eeeeee;
+}
+
 /*更新日志*/
 .upnote {
     display: flex;

index.html

@@ -25,7 +25,7 @@
     <link rel="stylesheet" type="text/css" href="./css/animation.css">
     <link rel="stylesheet" type="text/css" href="./css/cursor.css">
     <link rel="icon" href="./favicon.ico">
-    <link rel="apple-touch-icon" href="./img/apple-touch-icon.png">
+    <link rel="apple-touch-icon" href="./img/icon/apple-touch-icon.png">
     <!-- Izitoast -->
     <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/izitoast/1.4.0/css/iziToast.min.css">
     <script type="text/javascript"
@@ -60,8 +60,13 @@
             </div>
         </div>
     </div>
-    <!--加载动画结束-->
     <section id="section" class="section">
+        <!-- 背景图片 -->
+        <div class="bg-all">
+            <img id="bg" onerror="this.classList.add('error');"></img>
+            <div class="cover"></div>
+        </div>
+        <!--主体内容-->
         <main id="main" class="main">
             <div class="container" id="container">
                 <div class="row" id="row">
@@ -70,7 +75,7 @@
                         <div class="main-left">
                             <!--Logo-->
                             <div class="main-img">
-                                <img src="./img/logo.png" alt="img">
+                                <img src="./img/icon/logo.png" alt="img">
                                 <div class="img-title">
                                     <span class="img-title">imsyy</span>
                                     <span class="img-text">.top</span>
@@ -170,9 +175,9 @@
                                             <span id="city_text">天气</span>&nbsp;
                                             <span id="wea_text">加载失败</span>&nbsp;
                                             <span id="tem_night"></span>°C~
-                                            <span id="tem_day"></span>°C&nbsp;
-                                            <span id="win_text"></span>
-                                            <span id="win_speed"></span>
+                                            <span id="tem_day"></span>°C
+                                            <!-- <span id="win_text"></span>
+                                            <span id="win_speed"></span> -->
                                         </div>
                                     </div>
                                 </div>
@@ -359,27 +364,34 @@
                                         <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                             data-bs-target="#collapseOne" aria-expanded="true"
                                             aria-controls="collapseOne">
-                                            个性设置 - 尚未实现
+                                            壁纸设置
                                         </button>
                                     </h2>
                                     <div id="collapseOne" class="accordion-collapse collapse show"
                                         aria-labelledby="headingOne" data-bs-parent="#accordion">
                                         <div class="accordion-body">
                                             <div class="set">
-                                                <div class="set-text">壁纸个性化</div>
-                                                <div class="btn-group" role="group"
-                                                    aria-label="Basic radio toggle button group">
-                                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio1"
-                                                        autocomplete="off" checked>
-                                                    <label class="btn btn-outline-primary" for="btnradio1">默认壁纸</label>
-
-                                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio2"
-                                                        autocomplete="off">
-                                                    <label class="btn btn-outline-primary" for="btnradio2">每日一图</label>
-
-                                                    <input type="radio" class="btn-check" name="btnradio" id="btnradio3"
-                                                        autocomplete="off">
-                                                    <label class="btn btn-outline-primary" for="btnradio3">随机动漫</label>
+                                                <div class="wallpaper" id="wallpaper">
+                                                    <div class="form-radio">
+                                                        <input type="radio" class="set-wallpaper" style="display: none;"
+                                                            id="radio1" value="1" name="wallpaper-type">
+                                                        <label for="radio1">默认壁纸</label>
+                                                    </div>
+                                                    <div class="form-radio">
+                                                        <input type="radio" class="set-wallpaper" style="display: none;"
+                                                            id="radio2" value="2" name="wallpaper-type">
+                                                        <label for="radio2">每日一图</label>
+                                                    </div>
+                                                    <div class="form-radio">
+                                                        <input type="radio" class="set-wallpaper" style="display: none;"
+                                                            id="radio3" value="3" name="wallpaper-type">
+                                                        <label for="radio3">随机风景</label>
+                                                    </div>
+                                                    <div class="form-radio">
+                                                        <input type="radio" class="set-wallpaper" style="display: none;"
+                                                            id="radio4" value="4" name="wallpaper-type">
+                                                        <label for="radio4">随机动漫</label>
+                                                    </div>
                                                 </div>
                                             </div>
                                         </div>
@@ -399,17 +411,16 @@
                                         <div class="accordion-body">
                                             <div class="upnote">
                                                 <span class="uptext"><i
-                                                        class="iconfont icon-plus"></i>&nbsp;音乐播放器支持音量控制</span>
+                                                        class="iconfont icon-plus"></i>&nbsp;壁纸个性化设置</span>
                                                 <span class="uptext"><i
-                                                        class="iconfont icon-plus"></i>&nbsp;新增动态跟随鼠标样式</span>
+                                                        class="iconfont icon-plus"></i>&nbsp;音乐播放器支持音量控制</span>
                                                 <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;修复
                                                     CDN 加载缓慢</span>
                                                 <span class="uptext"><i
                                                         class="iconfont icon-wrench-fill"></i>&nbsp;时光胶囊显示错误</span>
                                                 <span class="uptext"><i
                                                         class="iconfont icon-wrench-fill"></i>&nbsp;移动端动画及细节</span>
-                                                <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;图标改为
-                                                    Iconfont</span>
+                                                <span class="uptext"><i class="iconfont icon-wrench-fill"></i>&nbsp;优化部分动画及细节</span>
                                                 <span class="uptext"><i class="iconfont icon-undo"></i>&nbsp;<a
                                                         href="./old/" style="color:#efefef">点击此处返回旧版站点</a></span>
                                             </div>
@@ -446,6 +457,8 @@
     <!-- JS -->
     <script type="text/javascript" src="./js/main.js"></script>
     <script type="text/javascript" src="./js/time.js"></script>
+    <script type="text/javascript" src="./js/js.cookie.js"></script>
+    <script type="text/javascript" src="./js/set.js"></script>
     <script type="text/javascript" src="./js/cursor.js"></script>
     <script type="text/javascript"
         src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/bootstrap/5.1.0/js/bootstrap.min.js">

js/js.cookie.js

@@ -0,0 +1,164 @@
+/*!
+ * JavaScript Cookie v2.2.1
+ * https://github.com/js-cookie/js-cookie
+ *
+ * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
+ * Released under the MIT license
+ */
+;
+(function (factory) {
+	var registeredInModuleLoader;
+	if (typeof define === 'function' && define.amd) {
+		define(factory);
+		registeredInModuleLoader = true;
+	}
+	if (typeof exports === 'object') {
+		module.exports = factory();
+		registeredInModuleLoader = true;
+	}
+	if (!registeredInModuleLoader) {
+		var OldCookies = window.Cookies;
+		var api = window.Cookies = factory();
+		api.noConflict = function () {
+			window.Cookies = OldCookies;
+			return api;
+		};
+	}
+}(function () {
+	function extend() {
+		var i = 0;
+		var result = {};
+		for (; i < arguments.length; i++) {
+			var attributes = arguments[i];
+			for (var key in attributes) {
+				result[key] = attributes[key];
+			}
+		}
+		return result;
+	}
+
+	function decode(s) {
+		return s.replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent);
+	}
+
+	function init(converter) {
+		function api() {}
+
+		function set(key, value, attributes) {
+			if (typeof document === 'undefined') {
+				return;
+			}
+
+			attributes = extend({
+				path: '/'
+			}, api.defaults, attributes);
+
+			if (typeof attributes.expires === 'number') {
+				attributes.expires = new Date(new Date() * 1 + attributes.expires * 864e+5);
+			}
+
+			// We're using "expires" because "max-age" is not supported by IE
+			attributes.expires = attributes.expires ? attributes.expires.toUTCString() : '';
+
+			try {
+				var result = JSON.stringify(value);
+				if (/^[\{\[]/.test(result)) {
+					value = result;
+				}
+			} catch (e) {}
+
+			value = converter.write ?
+				converter.write(value, key) :
+				encodeURIComponent(String(value))
+				.replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g, decodeURIComponent);
+
+			key = encodeURIComponent(String(key))
+				.replace(/%(23|24|26|2B|5E|60|7C)/g, decodeURIComponent)
+				.replace(/[\(\)]/g, escape);
+
+			var stringifiedAttributes = '';
+			for (var attributeName in attributes) {
+				if (!attributes[attributeName]) {
+					continue;
+				}
+				stringifiedAttributes += '; ' + attributeName;
+				if (attributes[attributeName] === true) {
+					continue;
+				}
+
+				// Considers RFC 6265 section 5.2:
+				// ...
+				// 3.  If the remaining unparsed-attributes contains a %x3B (";")
+				//     character:
+				// Consume the characters of the unparsed-attributes up to,
+				// not including, the first %x3B (";") character.
+				// ...
+				stringifiedAttributes += '=' + attributes[attributeName].split(';')[0];
+			}
+
+			return (document.cookie = key + '=' + value + stringifiedAttributes);
+		}
+
+		function get(key, json) {
+			if (typeof document === 'undefined') {
+				return;
+			}
+
+			var jar = {};
+			// To prevent the for loop in the first place assign an empty array
+			// in case there are no cookies at all.
+			var cookies = document.cookie ? document.cookie.split('; ') : [];
+			var i = 0;
+
+			for (; i < cookies.length; i++) {
+				var parts = cookies[i].split('=');
+				var cookie = parts.slice(1).join('=');
+
+				if (!json && cookie.charAt(0) === '"') {
+					cookie = cookie.slice(1, -1);
+				}
+
+				try {
+					var name = decode(parts[0]);
+					cookie = (converter.read || converter)(cookie, name) ||
+						decode(cookie);
+
+					if (json) {
+						try {
+							cookie = JSON.parse(cookie);
+						} catch (e) {}
+					}
+
+					jar[name] = cookie;
+
+					if (key === name) {
+						break;
+					}
+				} catch (e) {}
+			}
+
+			return key ? jar[key] : jar;
+		}
+
+		api.set = set;
+		api.get = function (key) {
+			return get(key, false /* read as raw */ );
+		};
+		api.getJSON = function (key) {
+			return get(key, true /* read as json */ );
+		};
+		api.remove = function (key, attributes) {
+			set(key, '', extend(attributes, {
+				expires: -1
+			}));
+		};
+
+		api.defaults = {};
+
+		api.withConverter = init;
+
+		return api;
+	}
+
+	return init(function () {});
+}));

js/main.js

@@ -20,6 +20,8 @@ window.addEventListener('load', function () {
 
     //载入动画
     $('#loading-box').attr('class', 'loaded');
+    $('#bg').css("cssText", "transform: scale(1);filter: blur(0px);transition: ease 1.5s;");
+    $('.cover').css("cssText", "opacity: 1;transition: ease 1.5s;");
     $('#section').css("cssText", "transform: scale(1) !important;opacity: 1 !important;filter: blur(0px) !important");
 
     //用户欢迎
@@ -73,7 +75,7 @@ if (isFirefox = navigator.userAgent.indexOf("Firefox") > 0) {
     window.addEventListener('load', function () {
         iziToast.show({
             timeout: 8000,
-            iconUrl: './img/warn.png',
+            iconUrl: './img/icon/warn.png',
             message: '您正在使用火狐浏览器，部分功能可能不支持'
         });
     }, false)
@@ -98,8 +100,8 @@ fetch('https://www.yiketianqi.com/free/day?appid=43986679&appsecret=TksqGZT7&une
         $('#city_text').html(data.city)
         $('#tem_night').html(data.tem_night)
         $('#tem_day').html(data.tem_day)
-        $('#win_text').html(data.win)
-        $('#win_speed').html(data.win_speed)
+        // $('#win_text').html(data.win)
+        // $('#win_speed').html(data.win_speed)
     })
     .catch(console.error)
 
@@ -271,7 +273,7 @@ $("#more").hover(function () {
 document.oncontextmenu = function () {
     iziToast.show({
         timeout: 2000,
-        iconUrl: './img/warn.png',
+        iconUrl: './img/icon/warn.png',
         message: '为了浏览体验，本站禁用右键'
     });
     return false;
@@ -293,7 +295,7 @@ for (var day of days) {
         window.addEventListener('load', function () {
             iziToast.show({
                 timeout: 14000,
-                iconUrl: './img/candle.png',
+                iconUrl: './img/icon/candle.png',
                 message: '今天是中国国家纪念日'
             });
         }, false);
@@ -327,11 +329,11 @@ var content = `
 更新日期：2022-04-12
 
 更新说明：
-1. 新增 音乐播放器支持音量控制
-2. 修复 CDN 加载缓慢
+1. 新增 壁纸个性化设置
+2. 新增 音乐播放器支持音量控制
 3. 优化 部分动画及细节
 4. 优化 页面加载缓慢
-5. 优化 音乐列表延迟加载
+5. 优化 音乐延迟加载
 
 主页:  https://www.imsyy.top
 Github:  https://github.com/imsyy/home

js/music.js

@@ -420,7 +420,7 @@ ap.on('play', function () {
     music = $(".aplayer-title").text() + $(".aplayer-author").text();
     iziToast.info({
         timeout: 8000,
-        iconUrl: './img/music.png',
+        iconUrl: './img/icon/music.png',
         displayMode: 'replace',
         message: music
     });

js/set.js

@@ -0,0 +1,115 @@
+// 背景图片 Cookies 
+function setBgImg(bg_img) {
+    if (bg_img) {
+        Cookies.set('bg_img', bg_img, {
+            expires: 36500
+        });
+        return true;
+    }
+    return false;
+}
+
+// 获取背景图片 Cookies
+function getBgImg() {
+    var bg_img_local = Cookies.get('bg_img');
+    if (bg_img_local && bg_img_local !== "{}") {
+        return JSON.parse(bg_img_local);
+    } else {
+        setBgImg(bg_img_preinstall);
+        return bg_img_preinstall;
+    }
+}
+
+var bg_img_preinstall = {
+    "type": "1", // 1:默认背景 2:每日一图 3:随机风景 4:随机动漫
+    "path": "", //自定义图片
+};
+
+
+// 更改背景图片
+function setBgImgInit() {
+    var bg_img = getBgImg();
+    $("input[name='wallpaper-type'][value=" + bg_img["type"] + "]").click();
+
+    switch (bg_img["type"]) {
+        case "1":
+            var pictures = new Array();
+            pictures[0] = './img/background1.webp';
+            pictures[1] = './img/background2.webp';
+            pictures[2] = './img/background3.webp';
+            pictures[3] = './img/background4.webp';
+            pictures[4] = './img/background5.webp';
+            pictures[5] = './img/background6.webp';
+            pictures[6] = './img/background7.webp';
+            pictures[7] = './img/background8.webp';
+            pictures[8] = './img/background9.webp';
+            pictures[9] = './img/background10.webp';
+            var rd = Math.floor(Math.random() * 10);
+            $('#bg').attr('src', pictures[rd]) //随机默认壁纸
+            break;
+        case "2":
+            $('#bg').attr('src', 'https://api.dujin.org/bing/1920.php'); //必应每日
+            break;
+        case "3":
+            $('#bg').attr('src', 'https://api.ixiaowai.cn/gqapi/gqapi.php'); //随机风景
+            break;
+        case "4":
+            $('#bg').attr('src', 'https://api.ixiaowai.cn/api/api.php'); //随机动漫
+            break;
+    }
+}
+
+$(document).ready(function () {
+    // 壁纸数据加载
+    setBgImgInit();
+    // 设置背景图片
+    $("#wallpaper").on("click", ".set-wallpaper", function () {
+        var type = $(this).val();
+        var bg_img = getBgImg();
+        bg_img["type"] = type;
+
+        if (type === "1") {
+            setBgImg(bg_img);
+            var pictures = new Array();
+            pictures[0] = './img/background1.webp';
+            pictures[1] = './img/background2.webp';
+            pictures[2] = './img/background3.webp';
+            pictures[3] = './img/background4.webp';
+            pictures[4] = './img/background5.webp';
+            pictures[5] = './img/background6.webp';
+            pictures[6] = './img/background7.webp';
+            pictures[7] = './img/background8.webp';
+            pictures[8] = './img/background9.webp';
+            pictures[9] = './img/background10.webp';
+            var rd = Math.floor(Math.random() * 10);
+            $('#bg').attr('src', pictures[rd]) //随机默认壁纸
+            iziToast.show({
+                message: '壁纸设置成功',
+            });
+        }
+
+        if (type === "2") {
+            setBgImg(bg_img);
+            $('#bg').attr('src', 'https://api.dujin.org/bing/1920.php'); //必应每日
+            iziToast.show({
+                message: '壁纸设置成功',
+            });
+        }
+
+        if (type === "3") {
+            setBgImg(bg_img);
+            $('#bg').attr('src', 'https://api.ixiaowai.cn/gqapi/gqapi.php'); //随机风景
+            iziToast.show({
+                message: '壁纸设置成功',
+            });
+        }
+
+        if (type === "4") {
+            setBgImg(bg_img);
+            $('#bg').attr('src', 'https://api.ixiaowai.cn/api/api.php'); //随机动漫
+            iziToast.show({
+                message: '壁纸设置成功',
+            });
+        }
+    });
+});