网页便签日历是一种常见的应用，可以帮助我们快速记录日程、备忘事项等。而JS全屏背景切换的网页便签日历，则是在传统的网页便签日历基础上加入了全屏背景的切换功能，让用户在使用时获得更好的视觉体验。

本文将向大家介绍如何在JS中实现全屏背景切换的网页便签日历，并提供代码示例。

实现步骤

HTML结构

我们需要创建一个HTML文件，并添加以下标记：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS全屏背景切换的网页便签日历</title>
</head>
<body>
  <div class="calendar"></div>
  <div class="bg"></div>
</body>
</html>

其中，div.calendar是用来展示网页便签日历的容器，div.bg则是用来展示全屏背景图片的容器。

CSS样式

我们需要在CSS中为日历和背景容器添加样式：

* {
  margin: 0;
  padding: 0;
}

.calendar {
  width: 80%;
  margin: 50px auto;
}

.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

这里，我们将日历容器的宽度设置为80%，并通过margin属性居中显示。背景容器则使用了position:fixed属性，让其固定在屏幕上方，并且使用z-index属性设置其层级。

JS脚本

我们需要使用JS脚本来实现全屏背景切换的功能。具体步骤如下：

  1. 获取所有背景图片的URL地址。
  2. 创建一个函数来随机获取这些URL地址中的一个，并将其赋值给背景容器的backgroundImage属性。
  3. 在页面加载时调用这个函数，以显示一个随机的背景图片。
  4. 为“上一个月”和“下一个月”按钮添加事件监听器，用来切换日历表，并更新背景图片。

代码示例如下：

var imgs = [
  "bg1.jpg",
  "bg2.jpg",
  "bg3.jpg"
];

function setBg() {
  var randomBg = imgs[Math.floor(Math.random() * imgs.length)];
  document.querySelector(".bg").style.backgroundImage = "url(" + randomBg + ")";
}

window.onload = function() {
  setBg();
};

document.querySelector("#prevMonthBtn").addEventListener("click", function() {
  // 切换到上一个月份
  setBg();
});

document.querySelector("#nextMonthBtn").addEventListener("click", function() {
  // 切换到下一个月份
  setBg();
});

通过以上步骤，我们已经成功地实现了JS全屏背景切换的网页便签日历。用户可以在使用便签日历的同时，欣赏不同的背景图片，获得更好的视觉体验。