jQuery 通过写入 cookie 实现更换网页背景的方法,实际上就是利用 cookie 存储用户选择的网页背景样式及其对应的 CSS 样式类名,在页面加载时根据 cookie 中存储的样式类名来设置页面背景样式。
具体实现步骤如下:
1. HTML 结构
在 HTML 文档的 head 标签中引入 jQuery 库和自定义 js 文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>更换网页背景</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="path/to/custom.js"></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
2. CSS 样式
在 CSS 文件中定义多种背景样式,并分别用类名来命名。
.bg-white {
background-color: #fff;
}
.bg-grey {
background-color: #f2f2f2;
}
.bg-black {
background-color: #000;
}
3. JavaScript 代码实现
首先需要判断 cookie 中是否有背景样式类名的存储记录,如果有,则根据存储的类名来设置页面对应的背景样式;如果没有,则默认使用一种背景样式。
$(document).ready(function () {
var bgClass = getCookie("bgClass"); // 获取 cookie 中存储的背景样式类名
if (bgClass) {
$("body").addClass(bgClass); // 如果存在,则设置对应的背景样式
} else {
$("body").addClass("bg-white"); // 否则默认使用一种背景样式
}
// 给每个背景样式按钮添加点击事件处理程序
$("#whiteBgBtn").on("click", function () {
setCookie("bgClass", "bg-white"); // 在 cookie 中存储背景样式类名
$("body").removeClass().addClass("bg-white"); // 设置页面对应的背景样式
});
$("#greyBgBtn").on("click", function () {
setCookie("bgClass", "bg-grey");
$("body").removeClass().addClass("bg-grey");
});
$("#blackBgBtn").on("click", function () {
setCookie("bgClass", "bg-black");
$("body").removeClass().addClass("bg-black");
});
});
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1, c.length);
}
if (c.indexOf(nameEQ) == 0) {
return c.substring(nameEQ.length, c.length);
}
}
return null;
}
这段 JavaScript 代码实现了以下功能:
- 判断 cookie 中是否存在背景样式类名的存储记录,如果存在则设置页面的背景样式为该类名对应的样式,否则默认使用一种背景样式。
- 给每个背景样式按钮添加点击事件处理程序,当用户点击按钮时,将对应的背景样式类名存储到 cookie 中,并且设置页面的背景样式为该类名对应的样式。
- 定义了两个辅助函数 setCookie 和 getCookie,用于设置和获取 cookie 中的值。
示例一:使用 jQuery Cookie 插件
在上述代码中用纯 JavaScript 来实现 cookie 的读写操作可能会比较麻烦,这里我们可以借助 jQuery Cookie 插件来简化代码。
$(document).ready(function () {
var bgClass = $.cookie("bgClass"); // 获取 cookie 中存储的背景样式类名
if (bgClass) {
$("body").addClass(bgClass); // 如果存在,则设置对应的背景样式
} else {
$("body").addClass("bg-white"); // 否则默认使用一种背景样式
}
// 给每个背景样式按钮添加点击事件处理程序
$("#whiteBgBtn").on("click", function () {
$.cookie("bgClass", "bg-white"); // 在 cookie 中存储背景样式类名
$("body").removeClass().addClass("bg-white"); // 设置页面对应的背景样式
});
$("#greyBgBtn").on("click", function () {
$.cookie("bgClass", "bg-grey");
$("body").removeClass().addClass("bg-grey");
});
$("#blackBgBtn").on("click", function () {
$.cookie("bgClass", "bg-black");
$("body").removeClass().addClass("bg-black");
});
});
示例二:添加 CSS3 动画效果
在页面加载时,我们可以给 body 元素添加一个动画效果,让页面背景逐渐出现,从而增加页面的交互体验。
body {
opacity: 0;
transition: opacity .5s ease-in-out;
}
body.show {
opacity: 1;
}
修改 JavaScript 代码如下:
$(document).ready(function () {
var bgClass = $.cookie("bgClass");
if (bgClass) {
$("body").addClass(bgClass);
} else {
$("body").addClass("bg-white");
}
setTimeout(function () {
$("body").addClass("show");
}, 100);
// ...
});
这样,当页面加载时,body 元素将逐渐显示,从而给用户带来更好的使用体验。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery通过写入cookie实现更换网页背景的方法 - Python技术站