// 存数据 // name：命名 data：数据 function saveData(name, data) { localStorage.setItem(name, JSON.stringify({ 'time': Date.now(), 'data': data })) } // 取数据 // name：命名 time：过期时长,单位分钟,如传入30,即加载数据时如果超出30分钟返回0,否则返回数据 function loadData(name, time) { let d = JSON.parse(localStorage.getItem(name)); // 过期或有错误返回 0 否则返回数据 if (d) { let t = Date.now() - d.time if (t < (time * 60 * 1000) && t > -1) return d.data; } return 0; } // 上面两个函数如果你有其他需要存取数据的功能，也可以直接使用 // 读取背景 try { let data = loadData('blogbg', 1440) if (data) changeBg(data, 1) else localStorage.removeItem('blogbg'); } catch (error) { localStorage.removeItem('blogbg'); } // 切换背景函数 // 此处的flag是为了每次读取时都重新存储一次,导致过期时间不稳定 // 如果flag为0则存储,即设置背景. 为1则不存储,即每次加载自动读取背景. function changeBg(s, flag) { let bg = document.getElementById('web_bg') if (s.charAt(0) == '#') { bg.style.backgroundColor = s bg.style.backgroundImage = 'none' } else bg.style.backgroundImage = s if (!flag) { saveData('blogbg', s) } } // 以下为2.0新增内容 // 创建窗口 var winbox = '' function createWinbox() { let div = document.createElement('div') document.body.appendChild(div) winbox = WinBox({ id: 'changeBgBox', index: 999, title: "切换背景", x: "center", y: "center", minwidth: '300px', height: "60%", onmaximize: () => { div.innerHTML = `` }, onrestore: () => { div.innerHTML = '' } }); winResize(); window.addEventListener('resize', winResize) // 每一类我放了一个演示，直接往下复制粘贴 a标签 就可以，需要注意的是 函数里面的链接 冒号前面需要添加反斜杠\进行转义 winbox.body.innerHTML = `

点击对应样式即可切换背景。

有效期为一天，到期切回默认壁纸。

图片（手机）

查看电脑壁纸

图片（电脑）

查看电脑壁纸

渐变色

查看电脑壁纸

纯色

查看电脑壁纸
`; } // 适应窗口大小 function winResize() { var offsetWid = document.documentElement.clientWidth; if (offsetWid <= 768) { winbox.resize(offsetWid * 0.95 + "px", "90%").move("center", "center"); } else { winbox.resize(offsetWid * 0.6 + "px", "70%").move("center", "center"); } } // 切换状态，窗口已创建则控制窗口显示和隐藏，没窗口则创建窗口 function toggleWinbox() { if (document.querySelector('#changeBgBox')) winbox.toggleClass('hide'); else createWinbox(); } // 按钮加载雪花 function loadScript(url) { //查找带有“canvas_sakura”ID的标记 var canvas = document.querySelector('canvas#canvas_sakura'); var script = document.querySelector('script#luoye'); // Check if the tags exist if (canvas != null && script != null) { // Remove the tags canvas.remove(); script.remove(); // The tags do not exist, do something else var script = document.createElement("script"); script.setAttribute('id', 'luoye'); script.type = "text/javascript"; script.src = url; if (script.readyState) {//IE script.onreadystatechange = function () { if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; } }; } } else { // The tags do not exist, do something else var script = document.createElement("script"); script.setAttribute('id', 'luoye'); script.type = "text/javascript"; script.src = url; if (script.readyState) {//IE script.onreadystatechange = function () { if (script.readyState == "loaded" || script.readyState == "complete") { script.onreadystatechange = null; } }; } } document.body.appendChild(script); }