jQuery通过写入cookie实现更换网页背景的方法

2023年6月11日上午9:31 • JavaScript

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技术站